/* ============================================================= Enstructure Design System — Tokens (entry point) ============================================================= Three-tier system: primitives → themes → shadcn aliases. Order matters. Primitives first, then themes (which reference them), then shadcn aliases (which reference theme tokens). ============================================================= */ /* Fonts are loaded once via in the host HTML — do not @import here. */ /* Tier 1 — primitives (theme-agnostic) */ @import url('./tokens/primitives.css?v=7'); /* Tier 2 — theme (primitive → semantic) — Enstructure only */ @import url('./tokens/themes/enstructure.css?v=14'); /* Tier 3 — shadcn-compat aliases (semantic → shadcn names) */ @import url('./tokens/aliases.css?v=3'); /* ------------------------------------------------------------- DESIGN TWEAK HOOKS — set as data-attributes on ------------------------------------------------------------- */ /* Density — rem-based type/spacing scales with root font-size */ html[data-density="compact"] { font-size: 15px; } html[data-density="comfortable"] { font-size: 17px; } /* Corner radii — sharp ↔ soft. Default (no data-radius) is tightened toward Enstructure's controlled, industrial spec — cards ~4px, lg 6–8px, not the softer shadcn baseline in primitives.css. "sharp" goes crisper still; "soft" stays rounded. */ html:not([data-radius]) { --radius-xs: 2px; --radius-sm: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-2xl: 10px; --radius-3xl: 14px; } html[data-radius="sharp"] { --radius-xs: 1px; --radius-sm: 2px; --radius-md: 3px; --radius-lg: 4px; --radius-xl: 5px; --radius-2xl: 6px; --radius-3xl: 8px; } html[data-radius="soft"] { --radius-sm: 6px; --radius-md: 9px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 20px; --radius-3xl: 28px; } /* Body font pairing — A: Public Sans (default) · B: IBM Plex Sans */ html[data-font="plex"] { --font-body: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; } /* Motion — calm (default) ↔ snappy ↔ off. Overrides the semantic surface durations from primitives.css; consumed by every motion class in components.css (.icc-modal-pop / .icc-drawer-in / .icc-toast-in / u-stagger…). "calm" needs no attribute (it's the primitive default). */ html[data-motion="snappy"] { --dur-modal-in: 120ms; --dur-modal-out: 90ms; --dur-drawer-in: 170ms; --dur-drawer-out: 120ms; --dur-backdrop-in: 90ms; --dur-backdrop-out: 90ms; --dur-toast-in: 140ms; --dur-toast-out: 100ms; --dur-tab: 120ms; --stagger-step: 26ms; } html[data-motion="off"] { --dur-modal-in: 1ms; --dur-modal-out: 1ms; --dur-drawer-in: 1ms; --dur-drawer-out: 1ms; --dur-backdrop-in: 1ms; --dur-backdrop-out: 1ms; --dur-toast-in: 1ms; --dur-toast-out: 1ms; --dur-tab: 1ms; --stagger-step: 0ms; } /* ------------------------------------------------------------- GLOBAL RESETS — minimal, predictable ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { background: var(--surface-base); color: var(--content); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* Tailwind's `border` utility needs a default token color globally. SVG strokes use the `stroke` property and are unaffected. */ * { border-color: var(--border); } /* Focus ring — one consistent treatment everywhere */ :focus-visible { outline: var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color); outline-offset: var(--focus-ring-offset); border-radius: var(--radius-sm); } /* Dark-mode focus ring uses the gold accent token */ .dark :focus-visible { outline-color: var(--focus-ring-color-on-dark); } /* Input borders use --border-focus on keyboard interaction */ .dark input:focus-visible, .dark select:focus-visible, .dark textarea:focus-visible { border-color: var(--border-focus); } /* Selection */ ::selection { background: var(--interactive-accent); color: var(--interactive-accent-fg); }