/** * Aegis UX design tokens — plain CSS, framework-neutral (single source). * * This file is the ONE place the token values live: * - The React package imports it via index.css (Vite/Tailwind inline the * relative @import), so components see exactly these values. * - Static catalogs and product mockups it directly (no build step), * so a mockup and the built product cannot drift by construction. * * Semantic status set: --success/-foreground/-subtle/-border, --warning*, * --destructive*, --info* (light here, dark under .dark). Radius base 0.45rem. * * Categorical hue set: --hue-{amber|violet|teal|sky|rose|slate}-solid/-foreground/ * -subtle/-border, plus --hue-on (a glyph on a -solid fill). Hues name a KIND of * thing, never a state: they let a consumer tell categories apart (e.g. one card * per kind of delay) where the status set above would wrongly imply severity. The * set is closed. AA in both themes: -foreground and --foreground on -subtle >= 7:1, * --hue-on on -solid >= 4.5:1. * * Motion curves: --aegis-ease-out (anything entering, exiting or pressed), * --aegis-ease-in-out (something moving or morphing on screen), --aegis-ease-drawer * (a drawer or sheet sliding in). They are theme-independent, so they live in * :root only. Hover and colour changes keep the plain `ease` keyword, constant * motion keeps `linear`, and nothing uses `ease-in`. Durations stay literal * per element (press 100–160ms, popover 125–200ms, menu 150–250ms, drawer * 200–500ms; interface motion under 300ms). The aegis- prefix is deliberate: * Tailwind v4 already owns --ease-out and friends in the React build. * Do not fork these values into app repos — override only via a documented * theme layer (e.g. BIS.next EagleEye maps --ee-* on top). */ :root { --background: oklch(1 0 0); --foreground: oklch(0.13 0.028 261.692); --card: oklch(1 0 0); --card-foreground: oklch(0.13 0.028 261.692); --popover: oklch(1 0 0); --popover-foreground: oklch(0.13 0.028 261.692); --primary: oklch(0.488 0.243 264.376); --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.967 0.003 264.542); --muted-foreground: oklch(0.551 0.027 264.364); --accent: oklch(0.967 0.003 264.542); --accent-foreground: oklch(0.21 0.034 264.665); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.45 0.17 27); --destructive-subtle: oklch(0.97 0.025 27); --destructive-border: oklch(0.86 0.075 27); --success: oklch(0.52 0.14 155); --success-foreground: oklch(0.38 0.105 155); --success-subtle: oklch(0.965 0.03 155); --success-border: oklch(0.84 0.075 155); --warning: oklch(0.58 0.14 75); --warning-foreground: oklch(0.42 0.105 75); --warning-subtle: oklch(0.97 0.035 75); --warning-border: oklch(0.85 0.085 75); --info: oklch(0.52 0.13 250); --info-foreground: oklch(0.40 0.105 250); --info-subtle: oklch(0.965 0.025 250); --info-border: oklch(0.84 0.065 250); --hue-amber-solid: oklch(0.53 0.15 55); --hue-amber-foreground: oklch(0.42 0.12 55); --hue-amber-subtle: oklch(0.965 0.035 55); --hue-amber-border: oklch(0.84 0.09 55); --hue-violet-solid: oklch(0.53 0.15 295); --hue-violet-foreground: oklch(0.42 0.12 295); --hue-violet-subtle: oklch(0.965 0.035 295); --hue-violet-border: oklch(0.84 0.09 295); --hue-teal-solid: oklch(0.53 0.12 185); --hue-teal-foreground: oklch(0.42 0.096 185); --hue-teal-subtle: oklch(0.965 0.028 185); --hue-teal-border: oklch(0.84 0.072 185); --hue-sky-solid: oklch(0.53 0.128 225); --hue-sky-foreground: oklch(0.42 0.102 225); --hue-sky-subtle: oklch(0.965 0.03 225); --hue-sky-border: oklch(0.84 0.076 225); --hue-rose-solid: oklch(0.53 0.15 355); --hue-rose-foreground: oklch(0.42 0.12 355); --hue-rose-subtle: oklch(0.965 0.035 355); --hue-rose-border: oklch(0.84 0.09 355); --hue-slate-solid: oklch(0.53 0.037 260); --hue-slate-foreground: oklch(0.42 0.03 260); --hue-slate-subtle: oklch(0.965 0.009 260); --hue-slate-border: oklch(0.84 0.022 260); --hue-on: oklch(1 0 0); --overlay: oklch(0.13 0.02 261 / 78%); --overlay-foreground: oklch(0.985 0.002 247.839); --border: oklch(0.928 0.006 264.531); --input: oklch(0.928 0.006 264.531); --ring: oklch(0.707 0.022 261.325); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --radius: 0.45rem; --aegis-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --aegis-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --aegis-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --sidebar: oklch(0.985 0.002 247.839); --sidebar-foreground: oklch(0.13 0.028 261.692); --sidebar-primary: oklch(0.546 0.245 262.881); --sidebar-primary-foreground: oklch(0.97 0.014 254.604); --sidebar-accent: oklch(0.967 0.003 264.542); --sidebar-accent-foreground: oklch(0.21 0.034 264.665); --sidebar-border: oklch(0.928 0.006 264.531); --sidebar-ring: oklch(0.707 0.022 261.325); } .dark { --background: oklch(0.13 0.028 261.692); --foreground: oklch(0.985 0.002 247.839); --card: oklch(0.21 0.034 264.665); --card-foreground: oklch(0.985 0.002 247.839); --popover: oklch(0.21 0.034 264.665); --popover-foreground: oklch(0.985 0.002 247.839); --primary: oklch(0.42 0.18 266); --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.278 0.033 256.848); --muted-foreground: oklch(0.707 0.022 261.325); --accent: oklch(0.278 0.033 256.848); --accent-foreground: oklch(0.985 0.002 247.839); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.89 0.055 25); --destructive-subtle: oklch(0.28 0.065 25); --destructive-border: oklch(0.48 0.11 25); --success: oklch(0.74 0.16 155); --success-foreground: oklch(0.86 0.09 155); --success-subtle: oklch(0.27 0.045 155); --success-border: oklch(0.45 0.085 155); --warning: oklch(0.75 0.15 75); --warning-foreground: oklch(0.88 0.085 75); --warning-subtle: oklch(0.29 0.05 75); --warning-border: oklch(0.48 0.09 75); --info: oklch(0.72 0.13 250); --info-foreground: oklch(0.88 0.055 250); --info-subtle: oklch(0.27 0.04 250); --info-border: oklch(0.46 0.075 250); --hue-amber-solid: oklch(0.74 0.13 55); --hue-amber-foreground: oklch(0.87 0.08 55); --hue-amber-subtle: oklch(0.28 0.055 55); --hue-amber-border: oklch(0.47 0.1 55); --hue-violet-solid: oklch(0.74 0.13 295); --hue-violet-foreground: oklch(0.87 0.08 295); --hue-violet-subtle: oklch(0.28 0.055 295); --hue-violet-border: oklch(0.47 0.1 295); --hue-teal-solid: oklch(0.74 0.104 185); --hue-teal-foreground: oklch(0.87 0.064 185); --hue-teal-subtle: oklch(0.28 0.044 185); --hue-teal-border: oklch(0.47 0.08 185); --hue-sky-solid: oklch(0.74 0.111 225); --hue-sky-foreground: oklch(0.87 0.068 225); --hue-sky-subtle: oklch(0.28 0.047 225); --hue-sky-border: oklch(0.47 0.085 225); --hue-rose-solid: oklch(0.74 0.13 355); --hue-rose-foreground: oklch(0.87 0.08 355); --hue-rose-subtle: oklch(0.28 0.055 355); --hue-rose-border: oklch(0.47 0.1 355); --hue-slate-solid: oklch(0.74 0.033 260); --hue-slate-foreground: oklch(0.87 0.02 260); --hue-slate-subtle: oklch(0.28 0.014 260); --hue-slate-border: oklch(0.47 0.025 260); --hue-on: oklch(0.13 0.028 261.692); --overlay: oklch(0.06 0.012 261 / 84%); --overlay-foreground: oklch(0.985 0.002 247.839); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.551 0.027 264.364); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --sidebar: oklch(0.21 0.034 264.665); --sidebar-foreground: oklch(0.985 0.002 247.839); --sidebar-primary: oklch(0.623 0.214 259.815); --sidebar-primary-foreground: oklch(0.97 0.014 254.604); --sidebar-accent: oklch(0.278 0.033 256.848); --sidebar-accent-foreground: oklch(0.985 0.002 247.839); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.551 0.027 264.364); }