/** * Untitled UI Pro v7.0 — Design Tokens * Generated from Figma variable export: 785 tokens across 7 collections. * * ARCHITECTURE * ──────────── * Two layers: * * Layer 1 — Primitives (raw values, never reference directly in components) * Layer 2 — Semantic (contextual aliases, reference these in components) * * Layer 2 is split into two blocks: * :root → Light mode (default) * .dark → Dark mode overrides (applied when has class "dark") * * DARK MODE * ───────── * The dark-mode.js script in this plugin applies/removes .dark on * based on localStorage preference, falling back to prefers-color-scheme. * Call window.toggleColorScheme() from any button to switch modes. * * UNITS * ───── * Font sizes → rem (respects user browser font size for accessibility) * Spacing → rem (scales with user font preference) * Line heights → px (absolute, matched to specific font sizes) * Radius → px (visual detail, not accessibility-critical) * Widths → px (layout breakpoints, screen-width based) * Containers → px (layout) * * v2 palette merged 2026-08-12: brand=action blue #5F92DC, +slate scale — see docs/orchestration takeout in control-plane repo * * TOKEN COUNT * ─────────── * Layer 1 — Colors: 419 (primitives across 21+ palettes) * Layer 1 — Spacing: 17 * Layer 1 — Radius: 11 * Layer 1 — Typography: 32 * Layer 1 — Widths: 13 * Layer 1 — Containers: 3 * Layer 2 — Light mode: ~140 * Layer 2 — Dark mode: ~100 * Total: ~785 */ /* ═══════════════════════════════════════════════════════════════════════════ LAYER 1 — PRIMITIVE TOKENS Raw hex values. Use these to build semantic tokens, not in components. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Base ────────────────────────────────────────────────────────────────── */ --color-white: #ffffff; --color-black: #000000; --color-transparent: transparent; /* ── Brand (Action Blue #5F92DC — GSB v2 locked) ────────────────────────── */ --color-brand-25: #fbfdfe; --color-brand-50: #f3f7fd; --color-brand-100: #e5eefa; --color-brand-200: #cbddf5; --color-brand-300: #a9c6ee; --color-brand-400: #82abe5; --color-brand-500: #5f92dc; --color-brand-600: #4a7dcb; --color-brand-700: #3d68ab; --color-brand-800: #33548a; --color-brand-900: #2b4670; --color-brand-950: #1c2e4a; /* ── Slate (GSB identity #475467 at slate-600 — structural, non-interactive: deep sections, footer, display-heading ink) ─────────────────────────── */ --color-slate-25: #fcfcfd; --color-slate-50: #f6f7f9; --color-slate-100: #eef1f5; --color-slate-200: #dce1e8; --color-slate-300: #c2cad6; --color-slate-400: #98a4b5; --color-slate-500: #5d6b80; --color-slate-600: #475467; --color-slate-700: #3a4557; --color-slate-800: #2c3543; --color-slate-900: #232a36; --color-slate-950: #161b23; /* ── Error (Red) ────────────────────────────────────────────────────────── */ --color-error-25: #fefafa; --color-error-50: #fef2f1; --color-error-100: #fee3e1; --color-error-200: #fecdc9; --color-error-300: #fca19b; --color-error-400: #f97066; --color-error-500: #f04437; --color-error-600: #d92c20; --color-error-700: #b32218; --color-error-800: #901f17; --color-error-900: #7a2619; --color-error-950: #54150c; /* ── Warning (Orange/Yellow) ────────────────────────────────────────────── */ --color-warning-25: #fffcf4; --color-warning-50: #fff9eb; --color-warning-100: #feefc6; --color-warning-200: #fede88; --color-warning-300: #fec84a; --color-warning-400: #fcb022; --color-warning-500: #f78f08; --color-warning-600: #db6803; --color-warning-700: #b54707; --color-warning-800: #93370c; --color-warning-900: #792d0d; --color-warning-950: #4e1d08; /* ── Success (Green) ────────────────────────────────────────────────────── */ --color-success-25: #f5fdf9; --color-success-50: #ecfcf2; --color-success-100: #dbf9e6; --color-success-200: #aaefc6; --color-success-300: #75dfa6; --color-success-400: #47cd89; --color-success-500: #17b169; --color-success-600: #069454; --color-success-700: #057647; --color-success-800: #075d39; --color-success-900: #074c30; --color-success-950: #043320; /* ── Gray — default (Light Mode) ───────────────────────────────────────── */ --color-gray-25: #fdfdfd; --color-gray-50: #fafafa; --color-gray-100: #f5f5f5; --color-gray-200: #e9eaeb; --color-gray-300: #d5d7da; --color-gray-400: #a4a7ae; --color-gray-500: #717680; --color-gray-600: #535862; --color-gray-700: #414651; --color-gray-800: #252b37; --color-gray-900: #181d27; --color-gray-950: #0a0d12; /* ── Gray — Dark Mode ───────────────────────────────────────────────────── */ --color-gray-dark-25: #fafafa; --color-gray-dark-50: #f7f7f7; --color-gray-dark-100: #f0f0f1; --color-gray-dark-200: #ececed; --color-gray-dark-300: #cecfd2; --color-gray-dark-400: #94979c; --color-gray-dark-500: #85888e; --color-gray-dark-600: #61656c; --color-gray-dark-700: #373a41; --color-gray-dark-800: #22262f; --color-gray-dark-900: #13161b; --color-gray-dark-950: #0c0e12; /* ── Gray — Cool ────────────────────────────────────────────────────────── */ --color-gray-cool-25: #fcfcfd; --color-gray-cool-50: #f9f9fb; --color-gray-cool-100: #eff1f5; --color-gray-cool-200: #dcdfea; --color-gray-cool-300: #b9c0d4; --color-gray-cool-400: #7d89b0; --color-gray-cool-500: #5d6b98; --color-gray-cool-600: #4a5578; --color-gray-cool-700: #404968; --color-gray-cool-800: #30374f; --color-gray-cool-900: #111322; --color-gray-cool-950: #0e101b; /* ── Gray — Iron ────────────────────────────────────────────────────────── */ --color-gray-iron-25: #fcfcfc; --color-gray-iron-50: #fafafa; --color-gray-iron-100: #f4f4f5; --color-gray-iron-200: #e4e4e7; --color-gray-iron-300: #d1d1d6; --color-gray-iron-400: #a0a0ab; --color-gray-iron-500: #70707b; --color-gray-iron-600: #51525c; --color-gray-iron-700: #3f3f46; --color-gray-iron-800: #26272b; --color-gray-iron-900: #1a1a1e; --color-gray-iron-950: #131316; /* ── Gray — Modern ──────────────────────────────────────────────────────── */ --color-gray-modern-25: #fcfcfd; --color-gray-modern-50: #f8fafc; --color-gray-modern-100: #eef2f6; --color-gray-modern-200: #e3e8ef; --color-gray-modern-300: #cdd5df; --color-gray-modern-400: #9aa4b2; --color-gray-modern-500: #697586; --color-gray-modern-600: #4b5565; --color-gray-modern-700: #364152; --color-gray-modern-800: #202939; --color-gray-modern-900: #121926; --color-gray-modern-950: #0d121c; /* ── Gray — Neutral ─────────────────────────────────────────────────────── */ --color-gray-neutral-25: #fcfcfd; --color-gray-neutral-50: #f9fafb; --color-gray-neutral-100: #f3f4f6; --color-gray-neutral-200: #e5e7eb; --color-gray-neutral-300: #d2d6db; --color-gray-neutral-400: #9da4ae; --color-gray-neutral-500: #6c737f; --color-gray-neutral-600: #4d5761; --color-gray-neutral-700: #384250; --color-gray-neutral-800: #1f2a37; --color-gray-neutral-900: #111927; --color-gray-neutral-950: #0d121c; /* ── Gray — True ────────────────────────────────────────────────────────── */ --color-gray-true-25: #fcfcfc; --color-gray-true-50: #f7f7f7; --color-gray-true-100: #f5f5f5; --color-gray-true-200: #e5e5e5; --color-gray-true-300: #d6d6d6; --color-gray-true-400: #a3a3a3; --color-gray-true-500: #737373; --color-gray-true-600: #525252; --color-gray-true-700: #424242; --color-gray-true-800: #292929; --color-gray-true-900: #141414; --color-gray-true-950: #0f0f0f; /* ── Gray — Warm ────────────────────────────────────────────────────────── */ --color-gray-warm-25: #fdfdfc; --color-gray-warm-50: #fafaf9; --color-gray-warm-100: #f5f5f4; --color-gray-warm-200: #e7e5e4; --color-gray-warm-300: #d7d3d0; --color-gray-warm-400: #a9a29d; --color-gray-warm-500: #79716b; --color-gray-warm-600: #57534e; --color-gray-warm-700: #44403c; --color-gray-warm-800: #292524; --color-gray-warm-900: #1c1917; --color-gray-warm-950: #171412; /* ── Gray — Blue ────────────────────────────────────────────────────────── */ --color-gray-blue-25: #fcfcfd; --color-gray-blue-50: #f8f9fc; --color-gray-blue-100: #eaecf5; --color-gray-blue-200: #d5d9eb; --color-gray-blue-300: #b3b8db; --color-gray-blue-400: #717bbc; --color-gray-blue-500: #4e5ba6; --color-gray-blue-600: #3e4784; --color-gray-blue-700: #363f72; --color-gray-blue-800: #293056; --color-gray-blue-900: #101323; --color-gray-blue-950: #0d0f1c; /* ── Blue ───────────────────────────────────────────────────────────────── */ --color-blue-25: #f4f9ff; --color-blue-50: #eff8ff; --color-blue-100: #d1e9ff; --color-blue-200: #b2ddff; --color-blue-300: #84caff; --color-blue-400: #53b0fd; --color-blue-500: #2e90fa; --color-blue-600: #156fee; --color-blue-700: #175cd3; --color-blue-800: #1849a9; --color-blue-900: #194084; --color-blue-950: #102955; /* ── Blue — Dark ────────────────────────────────────────────────────────── */ --color-blue-dark-25: #f4f8ff; --color-blue-dark-50: #eff4ff; --color-blue-dark-100: #d1e0ff; --color-blue-dark-200: #b2cbff; --color-blue-dark-300: #83adff; --color-blue-dark-400: #518bff; --color-blue-dark-500: #2970fe; --color-blue-dark-600: #155dee; --color-blue-dark-700: #004eea; --color-blue-dark-800: #0040c1; --color-blue-dark-900: #00349e; --color-blue-dark-950: #002266; /* ── Blue — Light ───────────────────────────────────────────────────────── */ --color-blue-light-25: #f4faff; --color-blue-light-50: #f0f9ff; --color-blue-light-100: #dff2fe; --color-blue-light-200: #b9e5fd; --color-blue-light-300: #7bd4fd; --color-blue-light-400: #36bff9; --color-blue-light-500: #0ba4eb; --color-blue-light-600: #0085c9; --color-blue-light-700: #016aa2; --color-blue-light-800: #055986; --color-blue-light-900: #0a4a6f; --color-blue-light-950: #062b40; /* ── Cyan ───────────────────────────────────────────────────────────────── */ --color-cyan-25: #f5feff; --color-cyan-50: #ebfdff; --color-cyan-100: #cff8fe; --color-cyan-200: #a5f0fb; --color-cyan-300: #67e3f9; --color-cyan-400: #22cbed; --color-cyan-500: #05aed4; --color-cyan-600: #078ab2; --color-cyan-700: #0d6f90; --color-cyan-800: #155b75; --color-cyan-900: #154b63; --color-cyan-950: #0c2c3a; /* ── Teal ───────────────────────────────────────────────────────────────── */ --color-teal-25: #f6fefc; --color-teal-50: #f0fcf9; --color-teal-100: #ccfaef; --color-teal-200: #99f5e0; --color-teal-300: #5ee9cf; --color-teal-400: #2ed2b7; --color-teal-500: #15b69e; --color-teal-600: #0d9383; --color-teal-700: #0f7569; --color-teal-800: #115d55; --color-teal-900: #134d47; --color-teal-950: #0a2926; /* ── Green ──────────────────────────────────────────────────────────────── */ --color-green-25: #f5fdf9; --color-green-50: #ecfcf1; --color-green-100: #d2f8de; --color-green-200: #aaefc3; --color-green-300: #72e2a3; --color-green-400: #3bcb7e; --color-green-500: #16b264; --color-green-600: #09914f; --color-green-700: #087343; --color-green-800: #095b36; --color-green-900: #084b2e; --color-green-950: #052d1c; /* ── Green — Light ──────────────────────────────────────────────────────── */ --color-green-light-25: #fafef5; --color-green-light-50: #f3fde7; --color-green-light-100: #e3fbcb; --color-green-light-200: #cff7aa; --color-green-light-300: #a6ef66; --color-green-light-400: #85e139; --color-green-light-500: #65c51c; --color-green-light-600: #4ba30c; --color-green-light-700: #3a7c0e; --color-green-light-800: #316211; --color-green-light-900: #2b5313; --color-green-light-950: #15290a; /* ── Moss ───────────────────────────────────────────────────────────────── */ --color-moss-25: #fafdf7; --color-moss-50: #f5fbee; --color-moss-100: #e6f4d7; --color-moss-200: #ceeab0; --color-moss-300: #acdc79; --color-moss-400: #86cb3c; --color-moss-500: #669f2a; --color-moss-600: #4f7a21; --color-moss-700: #3f621a; --color-moss-800: #335015; --color-moss-900: #2b4212; --color-moss-950: #1a280b; /* ── Yellow ─────────────────────────────────────────────────────────────── */ --color-yellow-25: #fefdf0; --color-yellow-50: #fefbe8; --color-yellow-100: #fef7c3; --color-yellow-200: #feee95; --color-yellow-300: #fde272; --color-yellow-400: #fac515; --color-yellow-500: #eaaa08; --color-yellow-600: #ca8504; --color-yellow-700: #a15c07; --color-yellow-800: #854a0e; --color-yellow-900: #713b12; --color-yellow-950: #542c0d; /* ── Orange ─────────────────────────────────────────────────────────────── */ --color-orange-25: #fef9f5; --color-orange-50: #fef5ed; --color-orange-100: #fcead7; --color-orange-200: #f8dbaf; --color-orange-300: #f7b279; --color-orange-400: #f38743; --color-orange-500: #ef681f; --color-orange-600: #df4f16; --color-orange-700: #b93814; --color-orange-800: #932f18; --color-orange-900: #762817; --color-orange-950: #501b0f; /* ── Orange — Dark ──────────────────────────────────────────────────────── */ --color-orange-dark-25: #fff8f4; --color-orange-dark-50: #fff3ed; --color-orange-dark-100: #ffe5d5; --color-orange-dark-200: #fed6ad; --color-orange-dark-300: #ff9b65; --color-orange-dark-400: #fe692d; --color-orange-dark-500: #ff4305; --color-orange-dark-600: #e52d04; --color-orange-dark-700: #bb1b05; --color-orange-dark-800: #96170c; --color-orange-dark-900: #77190d; --color-orange-dark-950: #571209; /* ── Pink ───────────────────────────────────────────────────────────────── */ --color-pink-25: #fdf6fb; --color-pink-50: #fdf1f9; --color-pink-100: #fce6f5; --color-pink-200: #fbceee; --color-pink-300: #f9a7df; --color-pink-400: #f570c7; --color-pink-500: #ed46bb; --color-pink-600: #dc2590; --color-pink-700: #c01573; --color-pink-800: #9e155e; --color-pink-900: #841651; --color-pink-950: #4e0d30; /* ── Fuchsia ────────────────────────────────────────────────────────────── */ --color-fuchsia-25: #fefaff; --color-fuchsia-50: #fdf4ff; --color-fuchsia-100: #fbe8ff; --color-fuchsia-200: #f6d0fe; --color-fuchsia-300: #eeaafd; --color-fuchsia-400: #e478fa; --color-fuchsia-500: #d444f1; --color-fuchsia-600: #ba24d5; --color-fuchsia-700: #9f1ab1; --color-fuchsia-800: #821890; --color-fuchsia-900: #6f1877; --color-fuchsia-950: #47104c; /* ── Purple ─────────────────────────────────────────────────────────────── */ --color-purple-25: #faf9ff; --color-purple-50: #f3f3ff; --color-purple-100: #eae8fe; --color-purple-200: #d9d5fe; --color-purple-300: #bcb4fd; --color-purple-400: #9a89fb; --color-purple-500: #7959f8; --color-purple-600: #6838ee; --color-purple-700: #5925db; --color-purple-800: #4a1fb7; --color-purple-900: #3e1b96; --color-purple-950: #27115e; /* ── Violet ─────────────────────────────────────────────────────────────── */ --color-violet-25: #faf9ff; --color-violet-50: #f4f3ff; --color-violet-100: #ece8fe; --color-violet-200: #dcd5fe; --color-violet-300: #c3b4fd; --color-violet-400: #a48afa; --color-violet-500: #875af7; --color-violet-600: #7839ed; --color-violet-700: #6826da; --color-violet-800: #5720b6; --color-violet-900: #481c95; --color-violet-950: #2d115e; /* ── Indigo ─────────────────────────────────────────────────────────────── */ --color-indigo-25: #f4f8ff; --color-indigo-50: #eef3ff; --color-indigo-100: #dfeaff; --color-indigo-200: #c6d7fe; --color-indigo-300: #a3bbfd; --color-indigo-400: #7f98f9; --color-indigo-500: #6071f3; --color-indigo-600: #444ce6; --color-indigo-700: #3537cc; --color-indigo-800: #2d31a5; --color-indigo-900: #2c3282; --color-indigo-950: #1f235b; /* ── Rosé ───────────────────────────────────────────────────────────────── */ --color-rose-25: #fff5f6; --color-rose-50: #fff1f3; --color-rose-100: #ffe4e8; --color-rose-200: #fecdd6; --color-rose-300: #fea3b4; --color-rose-400: #fd6f8e; --color-rose-500: #f63d68; --color-rose-600: #e31b54; --color-rose-700: #c01048; --color-rose-800: #a11043; --color-rose-900: #89123e; --color-rose-950: #510b24; } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 1 — PRIMITIVE SPACING Converted to rem (÷16) for accessibility — scales with user font preferences. ═══════════════════════════════════════════════════════════════════════════ */ :root { --spacing-none: 0; --spacing-xxs: 0.125rem; /* 2px */ --spacing-xs: 0.25rem; /* 4px */ --spacing-sm: 0.375rem; /* 6px */ --spacing-md: 0.5rem; /* 8px */ --spacing-lg: 0.75rem; /* 12px */ --spacing-xl: 1rem; /* 16px */ --spacing-2xl: 1.25rem; /* 20px */ --spacing-3xl: 1.5rem; /* 24px */ --spacing-4xl: 2rem; /* 32px */ --spacing-5xl: 2.5rem; /* 40px */ --spacing-6xl: 3rem; /* 48px */ --spacing-7xl: 4rem; /* 64px */ --spacing-8xl: 5rem; /* 80px */ --spacing-9xl: 6rem; /* 96px */ --spacing-10xl: 8rem; /* 128px */ --spacing-11xl: 10rem; /* 160px */ } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 1 — PRIMITIVE RADIUS Kept in px — visual detail only, not accessibility-critical. ═══════════════════════════════════════════════════════════════════════════ */ :root { --radius-none: 0px; --radius-xxs: 2px; --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 20px; --radius-4xl: 24px; --radius-full: 9999px; } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 1 — PRIMITIVE WIDTHS & CONTAINERS Kept in px — layout breakpoints are screen-width based, not font-size based. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Widths / Breakpoints */ --width-xxs: 320px; --width-xs: 384px; --width-sm: 480px; --width-md: 560px; --width-lg: 640px; --width-xl: 768px; --width-2xl: 1024px; --width-3xl: 1280px; --width-4xl: 1440px; --width-5xl: 1600px; --width-6xl: 1920px; --width-paragraph-max: 720px; /* max readable line length */ /* Containers */ --container-max-width: 1280px; --container-padding-desktop: 32px; --container-padding-mobile: 16px; /* Shadows (GSB v2) */ --shadow-sm: 0 1px 2px rgba(10,13,18,.05); --shadow-md: 0 4px 8px -2px rgba(10,13,18,.08), 0 2px 4px -2px rgba(10,13,18,.04); --shadow-lg: 0 12px 24px -4px rgba(10,13,18,.10), 0 4px 8px -4px rgba(10,13,18,.04); /* Navigation (GSB v2) */ --nav-height: 72px; --nav-blur: rgba(255,255,255,.82); /* dark override in .dark block */ } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 1 — PRIMITIVE TYPOGRAPHY Font sizes in rem for accessibility. Line heights in px (matched to sizes). ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Font Families */ --font-family-display: 'Poppins', -apple-system, sans-serif; --font-family-body: 'Source Sans 3', -apple-system, sans-serif; /* Letter Spacing */ --letter-spacing-display: -0.015em; /* display headings only */ /* Font Sizes — Text (body-scale) */ --font-size-text-xs: 0.75rem; /* 12px */ --font-size-text-sm: 0.875rem; /* 14px */ --font-size-text-md: 1rem; /* 16px */ --font-size-text-lg: 1.125rem; /* 18px */ --font-size-text-xl: 1.25rem; /* 20px */ /* Font Sizes — Display (heading-scale) */ --font-size-display-xs: 1.5rem; /* 24px */ --font-size-display-sm: 1.875rem; /* 30px */ --font-size-display-md: 2.25rem; /* 36px */ --font-size-display-lg: 3rem; /* 48px */ --font-size-display-xl: 3.75rem; /* 60px */ --font-size-display-2xl: 4.5rem; /* 72px */ /* Line Heights — Text */ --line-height-text-xs: 18px; --line-height-text-sm: 20px; --line-height-text-md: 24px; --line-height-text-lg: 28px; --line-height-text-xl: 30px; /* Line Heights — Display */ --line-height-display-xs: 32px; --line-height-display-sm: 38px; --line-height-display-md: 44px; --line-height-display-lg: 60px; --line-height-display-xl: 72px; --line-height-display-2xl: 90px; /* Font Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 2 — SEMANTIC TOKENS: LIGHT MODE (default) These are the tokens to use in components. They reference primitive values. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Backgrounds ────────────────────────────────────────────────────────── * Use bg-primary for page/card backgrounds, bg-secondary for subtle panels, * bg-tertiary for inputs, bg-quaternary for hover states. */ --color-bg-primary: #ffffff; --color-bg-secondary: #fafafa; --color-bg-tertiary: #f5f5f5; --color-bg-quaternary: #e9eaeb; --color-bg-active: #fafafa; --color-bg-primary-hover: #fafafa; --color-bg-secondary-hover: #f5f5f5; --color-bg-disabled: #f5f5f5; --color-bg-disabled-subtle: #fafafa; --color-bg-wash: #f4f6f9; /* washed section canvas (slate-tinted) */ /* Brand backgrounds */ --color-bg-brand-primary: #f3f7fd; --color-bg-brand-secondary: #e5eefa; --color-bg-brand-solid: #5f92dc; /* CTA solid = brand-500 (locked; deviates from Untitled's 600 default by design) */ --color-bg-brand-solid-hover: #4a7dcb; /* brand-600 */ --color-bg-brand-section: #2c3543; /* slate-800 — footer / deep CTA bands = slate identity */ /* State backgrounds */ --color-bg-error-primary: #fef2f1; --color-bg-error-secondary: #fee3e1; --color-bg-error-solid: #d92c20; --color-bg-warning-primary: #fff9eb; --color-bg-warning-secondary: #feefc6; --color-bg-warning-solid: #db6803; --color-bg-success-primary: #ecfcf2; --color-bg-success-secondary: #dbf9e6; --color-bg-success-solid: #069454; /* ── Borders ────────────────────────────────────────────────────────────── * Use border-primary for default borders, border-secondary for subtle * dividers, border-brand for focused/highlighted states. */ --color-border-primary: #d5d7da; --color-border-secondary: #e9eaeb; --color-border-tertiary: #f5f5f5; --color-border-brand: #5f92dc; /* brand-500 — focus/selected */ --color-border-disabled: #d5d7da; --color-border-disabled-subtle: #e9eaeb; --color-border-error: #f04437; --color-border-error-subtle: #fca19b; /* ── Text ───────────────────────────────────────────────────────────────── * Use text-primary for headings and body, text-secondary for supporting * copy, text-tertiary for captions and hints, text-disabled for inactive. */ --color-text-primary: #181d27; --color-text-secondary: #414651; --color-text-tertiary: #535862; --color-text-white: #ffffff; --color-text-on-brand: #ffffff; /* on action solids */ --color-text-on-section: #ffffff; /* on slate sections/footer */ --color-text-disabled: #717680; --color-text-placeholder: #717680; /* Brand text */ --color-text-brand-primary: #2b4670; /* brand-900 */ --color-text-brand-secondary: #3d68ab; /* brand-700 — links, active outline items */ --color-text-brand-tertiary: #4a7dcb; /* brand-600 */ --color-text-brand-secondary-hover: #33548a; /* brand-800 */ /* State text */ --color-text-error-primary: #d92c20; --color-text-error-primary-hover: #b32218; --color-text-warning-primary: #db6803; --color-text-success-primary: #069454; /* ── Foreground (icons, graphics) ───────────────────────────────────────── * Mirrors text hierarchy but specifically for icons and non-text elements. */ --color-fg-primary: #181d27; --color-fg-secondary: #414651; --color-fg-tertiary: #535862; --color-fg-quaternary: #a4a7ae; --color-fg-white: #ffffff; --color-fg-disabled: #a4a7ae; --color-fg-disabled-subtle: #d5d7da; /* Brand foreground */ --color-fg-brand-primary: #4a7dcb; /* brand-600 — interactive icons, eyebrows, play glyphs */ --color-fg-brand-secondary: #5f92dc; /* brand-500 */ --color-fg-brand-secondary-hover: #4a7dcb; /* brand-600 */ /* State foreground */ --color-fg-error-primary: #d92c20; --color-fg-error-secondary: #f04437; --color-fg-warning-primary: #db6803; --color-fg-warning-secondary: #f78f08; --color-fg-success-primary: #069454; --color-fg-success-secondary: #17b169; /* ── Utility / Component Colors (Light Mode) ────────────────────────────── * Pre-built palette swatches for component-level usage (badges, tags, etc.) */ /* Utility — Gray */ --utility-gray-50: #fafafa; --utility-gray-100: #f5f5f5; --utility-gray-200: #e9eaeb; --utility-gray-300: #d5d7da; --utility-gray-400: #a4a7ae; --utility-gray-500: #717680; --utility-gray-600: #535862; --utility-gray-700: #414651; --utility-gray-800: #252b37; --utility-gray-900: #181d27; /* Utility — Brand */ --utility-brand-50: #f3f7fd; --utility-brand-100: #e5eefa; --utility-brand-200: #cbddf5; --utility-brand-300: #a9c6ee; --utility-brand-400: #82abe5; --utility-brand-500: #5f92dc; --utility-brand-600: #4a7dcb; --utility-brand-700: #3d68ab; --utility-brand-800: #33548a; --utility-brand-900: #2b4670; /* Utility — Error */ --utility-error-50: #fef3f2; --utility-error-100: #fee4e2; --utility-error-200: #fecdca; --utility-error-300: #fda29b; --utility-error-400: #f97066; --utility-error-500: #f04438; --utility-error-600: #d92d20; --utility-error-700: #b42318; /* Utility — Warning */ --utility-warning-50: #fffaeb; --utility-warning-100: #fef0c7; --utility-warning-200: #fedf89; --utility-warning-300: #fec84b; --utility-warning-400: #fdb022; --utility-warning-500: #f79009; --utility-warning-600: #dc6803; --utility-warning-700: #b54708; /* Utility — Success */ --utility-success-50: #ecfdf3; --utility-success-100: #dcfae6; --utility-success-200: #abefc6; --utility-success-300: #75e0a7; --utility-success-400: #47cd89; --utility-success-500: #17b26a; --utility-success-600: #079455; --utility-success-700: #067647; /* Utility — Blue */ --utility-blue-50: #eff8ff; --utility-blue-100: #d1e9ff; --utility-blue-200: #b2ddff; --utility-blue-300: #84caff; --utility-blue-400: #53b1fd; --utility-blue-500: #2e90fa; --utility-blue-600: #1570ef; --utility-blue-700: #175cd3; /* ── Focus Ring ───────────────────────────────────────────────────────────*/ --color-focus-ring: #5f92dc; /* brand-500 */ --color-focus-ring-error: #f04437; } /* ═══════════════════════════════════════════════════════════════════════════ LAYER 2 — SEMANTIC TOKENS: DARK MODE Applied when — toggled by dark-mode.js. Only overrides tokens that change between light and dark. ═══════════════════════════════════════════════════════════════════════════ */ .dark { /* ── Backgrounds ─────────────────────────────────────────────────────────*/ --color-bg-primary: #0c0e12; --color-bg-secondary: #13161b; --color-bg-tertiary: #22262f; --color-bg-quaternary: #373a41; --color-bg-active: #22262f; --color-bg-primary-hover: #22262f; --color-bg-secondary-hover: #22262f; --color-bg-disabled: #22262f; --color-bg-disabled-subtle: #13161b; --color-bg-wash: #13161b; /* gray-dark-900 */ /* Brand backgrounds */ --color-bg-brand-primary: rgba(95,146,220,.10); /* brand tint wash */ --color-bg-brand-secondary: rgba(95,146,220,.18); --color-bg-brand-solid: #5f92dc; /* action holds its hue in dark */ --color-bg-brand-solid-hover: #82abe5; /* brand-400 — hover moves LIGHTER in dark */ --color-bg-brand-section: #13161b; /* gray-dark-900 */ /* State backgrounds */ --color-bg-error-primary: #55160c; --color-bg-error-secondary: #d92d20; --color-bg-error-solid: #d92d20; --color-bg-warning-primary: #4e1d09; --color-bg-warning-secondary: #dc6803; --color-bg-warning-solid: #dc6803; --color-bg-success-primary: #053321; --color-bg-success-secondary: #079455; --color-bg-success-solid: #079455; /* ── Borders ─────────────────────────────────────────────────────────────*/ --color-border-primary: #373a41; --color-border-secondary: #22262f; --color-border-tertiary: #22262f; --color-border-brand: #82abe5; /* brand-400 */ --color-border-disabled: #373a41; --color-border-disabled-subtle: #22262f; --color-border-error: #f97066; --color-border-error-subtle: #f04438; /* ── Text ────────────────────────────────────────────────────────────────*/ --color-text-primary: #f7f7f7; --color-text-secondary: #cecfd2; --color-text-tertiary: #94979c; --color-text-white: #ffffff; --color-text-disabled: #85888e; --color-text-placeholder: #85888e; /* Brand text */ --color-text-brand-primary: #f0f0f1; /* gray-dark-100 */ --color-text-brand-secondary: #a9c6ee; /* brand-300 */ --color-text-brand-tertiary: #94979c; --color-text-brand-secondary-hover: #ececed; /* State text */ --color-text-error-primary: #f97066; --color-text-error-primary-hover: #fda29b; --color-text-warning-primary: #fdb022; --color-text-success-primary: #47cd89; /* ── Foreground ──────────────────────────────────────────────────────────*/ --color-fg-primary: #ffffff; --color-fg-secondary: #cecfd2; --color-fg-tertiary: #94979c; --color-fg-quaternary: #61656c; --color-fg-white: #ffffff; --color-fg-disabled: #85888e; --color-fg-disabled-subtle: #61656c; /* Brand foreground */ --color-fg-brand-primary: #82abe5; /* brand-400 */ --color-fg-brand-secondary: #82abe5; /* brand-400 */ --color-fg-brand-secondary-hover: #85888e; /* State foreground */ --color-fg-error-primary: #f04438; --color-fg-error-secondary: #f97066; --color-fg-warning-primary: #f79009; --color-fg-warning-secondary: #fdb022; --color-fg-success-primary: #17b26a; --color-fg-success-secondary: #47cd89; /* ── Utility / Component Colors (Dark Mode overrides) ────────────────────*/ /* Utility — Gray (inverted for dark) */ --utility-gray-50: #13161b; --utility-gray-100: #22262f; --utility-gray-200: #373a41; --utility-gray-300: #373a41; --utility-gray-400: #61656c; --utility-gray-500: #85888e; --utility-gray-600: #94979c; --utility-gray-700: #cecfd2; --utility-gray-800: #ececed; --utility-gray-900: #f0f0f1; /* Utility — Brand (inverted for dark) */ --utility-brand-50: #1c2e4a; --utility-brand-100: #2b4670; --utility-brand-200: #33548a; --utility-brand-300: #3d68ab; --utility-brand-400: #4a7dcb; --utility-brand-500: #5f92dc; --utility-brand-600: #82abe5; --utility-brand-700: #a9c6ee; --utility-brand-800: #cbddf5; --utility-brand-900: #e5eefa; /* Utility — Error (inverted) */ --utility-error-50: #55160c; --utility-error-100: #7a271a; --utility-error-200: #912018; --utility-error-300: #b42318; --utility-error-400: #d92d20; --utility-error-500: #f04438; --utility-error-600: #f97066; --utility-error-700: #fda29b; /* Utility — Warning (inverted) */ --utility-warning-50: #4e1d09; --utility-warning-100: #7a2e0e; --utility-warning-200: #93370d; --utility-warning-300: #b54708; --utility-warning-400: #dc6803; --utility-warning-500: #f79009; --utility-warning-600: #fdb022; --utility-warning-700: #fec84b; /* Utility — Success (inverted) */ --utility-success-50: #053321; --utility-success-100: #074d31; --utility-success-200: #085d3a; --utility-success-300: #067647; --utility-success-400: #079455; --utility-success-500: #17b26a; --utility-success-600: #47cd89; --utility-success-700: #75e0a7; /* Utility — Blue (inverted) */ --utility-blue-50: #102a56; --utility-blue-100: #194185; --utility-blue-200: #1849a9; --utility-blue-300: #175cd3; --utility-blue-400: #1570ef; --utility-blue-500: #2e90fa; --utility-blue-600: #53b1fd; --utility-blue-700: #84caff; /* ── Focus Ring ──────────────────────────────────────────────────────────*/ --color-focus-ring: #82abe5; /* brand-400 */ --color-focus-ring-error: #f04438; /* ── Navigation ──────────────────────────────────────────────────────────*/ --nav-blur: rgba(12,14,18,.82); }