/* AUTO-SYNCED from Hub/design-system/tokens.css — DO NOT EDIT HERE. Edit the canonical file and re-run design-system/sync-tokens.sh. */ /* ═══════════════════════════════════════════════════════════════════ FAIRWINDS DESIGN SYSTEM — TOKENS The single source of truth for the shared aesthetic. Plain CSS custom properties so any app (plain CSS, Tailwind v4, Next.js) can consume them. Plain-CSS apps: @import this file, then use var(--token). Tailwind v4 apps: @import this file, then @import "theme.css" to expose the tokens as utilities (bg-surface, text-muted, etc.). Benchmark: Bill of Materials. Do not hand-edit per app — override tokens downstream instead (`:root { --accent: #xxx }` after the import). DARK THEME: every token here has a dark value in the block at the bottom, activated by EITHER `theme-dark` class on (the existing convention — SupplyChain/Production/Lab/Menu already ship it) or `data-theme="dark"`. The dark values are the browser-verified consensus block those three apps carried locally, promoted here as canon, plus dark steps for the ramps that block never covered. Dark mode is explicit opt-in only — no automatic prefers-color-scheme switch: apps must not change appearance until they've been audited for hardcoded colors. ═══════════════════════════════════════════════════════════════════ */ :root { /* ── Shell palette — dark navy-charcoal (deepens further in dark) ─ */ --shell: #1e2433; --shell-hover: #252c3d; --shell-active: #2d3448; --shell-border: rgba(255,255,255,0.08); --shell-text: rgba(255,255,255,0.9); --shell-muted: rgba(255,255,255,0.45); --shell-faint: rgba(255,255,255,0.25); /* ── Content palette — clean cool grays ─────────────────────── */ --stone-50: #f9fafb; --stone-100: #f3f4f6; --stone-200: #e5e7eb; --stone-300: #d1d5db; --stone-400: #9ca3af; --stone-500: #6b7280; --stone-600: #4b5563; --stone-700: #374151; --stone-800: #1f2937; --stone-900: #111827; /* ── Semantic ────────────────────────────────────────────────── */ --emerald-50: #ecfdf5; --emerald-200: #a7f3d0; --emerald-500: #10b981; --emerald-600: #059669; --emerald-700: #047857; --emerald-800: #065f46; --amber-50: #fffbeb; --amber-200: #fde68a; --amber-500: #f59e0b; --amber-600: #d97706; --amber-700: #b45309; --amber-800: #92400e; --rose-50: #fff1f2; --rose-200: #fecdd3; --rose-500: #f43f5e; --rose-600: #e11d48; --rose-700: #be123c; --rose-800: #9f1239; --teal-50: #ccfbf1; --teal-200: #99f6e4; --teal-500: #14b8a6; --teal-700: #0f766e; --sky-50: #e0f2fe; --sky-200: #bae6fd; --sky-500: #0ea5e9; --sky-700: #0369a1; /* ── Surface tokens ──────────────────────────────────────────── */ --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f4f6; --surface-3: #e5e7eb; --surface-raised: #ffffff; --border: #e5e7eb; --border-subtle: #f3f4f6; --border-strong: #d1d5db; --border-light: #f3f4f6; --text: #111827; --text-muted: #4b5563; --text-subtle: #6b7280; --text-faint: #9ca3af; /* ── Accent — cobalt blue ────────────────────────────────────── */ --accent: #2d5be3; --accent-hover: #2449c4; --accent-mid: #3b6ef0; --accent-light: #6b93f5; --accent-dim: #eff4ff; --accent-ring: rgba(45,91,227,0.15); --accent-border: #93b4f8; --accent-glow: rgba(45,91,227,0.25); --accent-glow-strong: rgba(45,91,227,0.3); /* ── Primary action — same cobalt ───────────────────────────── */ --highlight: #2d5be3; --highlight-hover: #2449c4; --highlight-dim: #eff4ff; --highlight-border: #93b4f8; /* Zebra stripe — a barely-there wash of the accent for alternating rows. Lighter than --accent-dim so black body text stays fully legible. */ --row-stripe: #f6f9ff; /* ── Component aliases ───────────────────────────────────────── */ --indigo-50: #eff4ff; --indigo-100: #dde8fe; --indigo-200: #c3d6fb; --indigo-300: #93b4f8; --indigo-400: #6b93f5; --indigo-500: #3b6ef0; --indigo-600: #2d5be3; --indigo-700: #2449c4; --indigo-800: #1c3796; --indigo-900: #182a66; --violet-50: #f5f3ff; --violet-100: #ede9fe; --violet-200: #ddd6fe; --violet-300: #c4b5fd; --violet-600: #7c3aed; --violet-700: #6d28d9; --violet-800: #5b21b6; --slate-25: #fdfdfd; --slate-50: #f3f4f6; --slate-100: #e5e7eb; --slate-200: #d1d5db; --slate-300: #9ca3af; --slate-600: #4b5563; --slate-800: #1f2937; --slate-900: #111827; /* ── Overlays ────────────────────────────────────────────────── */ --overlay: rgba(28,25,23,.5); --overlay-light: rgba(28,25,23,.25); --radius: 6px; --radius-sm: 4px; --radius-lg: 8px; --shadow-sm: 0 1px 2px rgba(17,24,39,.05), 0 1px 3px rgba(17,24,39,.03); --shadow-md: 0 2px 4px rgba(17,24,39,.07), 0 4px 8px rgba(17,24,39,.04); --shadow-lg: 0 8px 16px rgba(17,24,39,.09), 0 2px 4px rgba(17,24,39,.04); --shadow-xl: 0 16px 32px rgba(17,24,39,.12), 0 4px 8px rgba(17,24,39,.06); --shadow-inset: inset 0 1px 2px rgba(28,25,23,.04); --font-display: "Urbanist", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* ═══════════════════════════════════════════════════════════════════ DARK THEME — the browser-verified consensus block that SupplyChain, Production, and Lab each carried locally (byte-identical in all three, canonical comment in SupplyChain/src/styles.css), promoted here so every app shares it. Values they defined are adopted verbatim; the ramps their block never flipped (emerald/amber/rose text steps, teal, sky, violet text steps) get dark values here — fixing a real gap (e.g. unflipped emerald-700 on the dark emerald-50 wash was 2.91:1 contrast). Activated by `theme-dark` class on (existing app convention) or `data-theme="dark"` (HubNav toggle / new apps). Scale steps flip so tint chips and badges stay legible without per-app edits: *-50 tints become deep washes, *-200 borders become dark borders, *-700/800 text steps become light. The shell deepens further so the nav chrome still reads as chrome against dark content. ═══════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"], html.theme-dark { /* ── Shell — deepen the navy-charcoal ────────────────────────── */ --shell: #11151c; --shell-hover: #1a1f29; --shell-active: #232a36; --shell-border: rgba(255,255,255,0.10); --shell-text: rgba(255,255,255,0.92); --shell-muted: rgba(255,255,255,0.50); --shell-faint: rgba(255,255,255,0.30); /* ── Content palette — inverted, navy-tinted ─────────────────── */ --stone-50: #161b24; --stone-100: #1e2430; --stone-200: #2a3140; --stone-300: #3a4452; --stone-400: #5e6877; --stone-500: #8590a0; --stone-600: #aab3c1; --stone-700: #c6cdd8; --stone-800: #dfe3ea; --stone-900: #f1f3f7; /* ── Semantic — deep washes, dark borders, light text steps ──── */ --emerald-50: #0e2620; --emerald-200: #1d4d3d; --emerald-500: #34d399; --emerald-600: #34d399; --emerald-700: #6ee7b7; --emerald-800: #a7f3d0; --amber-50: #2a2310; --amber-200: #4d3b10; --amber-500: #fbbf24; --amber-600: #fbbf24; --amber-700: #fcd34d; --amber-800: #fde68a; --rose-50: #2c1620; --rose-200: #57202f; --rose-500: #fb7185; --rose-600: #fb7185; --rose-700: #fda4af; --rose-800: #fecdd3; --teal-50: #0d2b28; --teal-200: #134e4a; --teal-500: #2dd4bf; --teal-700: #5eead4; --sky-50: #0c2536; --sky-200: #14425e; --sky-500: #38bdf8; --sky-700: #7dd3fc; /* ── Surface tokens ──────────────────────────────────────────── */ --bg: #0f131a; --surface: #161b24; --surface-2: #1e2430; --surface-3: #2a3140; --surface-raised: #1b2230; --border: #2a3140; --border-subtle: #1f2430; --border-strong: #3a4452; --border-light: #1f2430; --text: #e9ecf2; --text-muted: #aab3c1; --text-subtle: #8590a0; --text-faint: #5e6877; /* ── Accent — slightly brighter cobalt for contrast on dark ──── */ --accent: #4d7bf0; --accent-hover: #6b93f5; --accent-mid: #5b86f5; --accent-light: #7aa0f7; --accent-dim: #18233c; --accent-ring: rgba(77,123,240,0.25); --accent-border: #2f4a87; --accent-glow: rgba(77,123,240,0.35); --accent-glow-strong: rgba(77,123,240,0.45); --highlight: #4d7bf0; --highlight-hover: #6b93f5; --highlight-dim: #18233c; --highlight-border: #2f4a87; --row-stripe: #141a26; /* ── Component aliases ───────────────────────────────────────── */ --indigo-50: #18233c; --indigo-100: #1f2e50; --indigo-200: #27407a; --indigo-300: #35509c; --indigo-400: #5b86f5; --indigo-500: #6b93f5; --indigo-600: #7aa0f7; --indigo-700: #93b4f8; --indigo-800: #b7ccfa; --indigo-900: #d3e0fc; --violet-50: #201a36; --violet-100: #2a2148; --violet-200: #352a59; --violet-300: #4a3a80; --violet-600: #a78bfa; --violet-700: #b9a3fc; --violet-800: #c4b5fd; --slate-25: #12161d; --slate-50: #1e2430; --slate-100: #2a3140; --slate-200: #3a4452; --slate-300: #5e6877; --slate-600: #aab3c1; --slate-800: #dfe3ea; --slate-900: #f1f3f7; /* ── Overlays & elevation — heavier in the dark ──────────────── */ --overlay: rgba(0,0,0,.65); --overlay-light: rgba(0,0,0,.4); --shadow-sm: 0 1px 2px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35); --shadow-md: 0 2px 4px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.4); --shadow-lg: 0 8px 16px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.4); --shadow-xl: 0 16px 32px rgba(0,0,0,.6), 0 4px 8px rgba(0,0,0,.45); --shadow-inset: inset 0 1px 2px rgba(0,0,0,.3); color-scheme: dark; }