/* ========================================================================== NARSIL AI (納曦智能) — DESIGN TOKENS ========================================================================== System : Narsil CIS Design System v1.0.0 · Astrodragon co. © 2026 Source : docs/design-system/tokens/design-tokens.json (canonical contract) derived from Narsil-CIS-Final-Version.pptx Model : OKLCH with sRGB hex fallbacks (progressive enhancement) RULES - Every custom property is namespaced `--narsil-`. - Color values are pre-computed sRGB→OKLCH ground truth. DO NOT recompute. - Hex fallbacks are declared on :root; OKLCH values override inside `@supports (color: oklch(0% 0 0))`. - Semantic tokens alias primitives via var(), so the OKLCH upgrade propagates to both themes automatically. - Theming: light is the :root default; dark applies via `@media (prefers-color-scheme: dark)` AND `[data-theme="dark"]`; `[data-theme="light"]` forces light (declared last so it beats the media query at equal specificity). The [data-theme] selectors are not bound to :root, so any subtree (e.g. a hero or CTA band) can be scope-themed:
…
. ========================================================================== */ /* -------------------------------------------------------------------------- 1. COLOR PRIMITIVES — sRGB hex fallbacks -------------------------------------------------------------------------- */ :root { /* ---- Singletons ---- */ --narsil-black: #000000; --narsil-white: #FFFFFF; --narsil-ink: #151410; /* warm near-black (shadow tint base) */ --narsil-navy-black: #1A1F30; --narsil-cream: #E2DDD7; /* parchment */ --narsil-ivory: #FAF6F0; --narsil-gold: #CC9E6C; /* SIGNATURE ACCENT · == bronze-400 */ --narsil-amber: #FFAB40; /* highlight */ --narsil-link: #3B82F6; --narsil-danger: #D93025; /* ---- Graphite scale (H=248.0 · cool neutral · anchor 800 = PRIMARY DARK #36393C) ---- */ --narsil-graphite-50: #F5F7F9; --narsil-graphite-100: #E9EBEE; --narsil-graphite-200: #D4D8DB; --narsil-graphite-300: #BABEC3; --narsil-graphite-400: #A0A5AA; --narsil-graphite-500: #868B90; --narsil-graphite-600: #6E7277; --narsil-graphite-700: #55585C; --narsil-graphite-800: #36393C; /* brand PRIMARY DARK */ --narsil-graphite-900: #2C2E30; --narsil-graphite-950: #191B1C; /* ---- Bronze scale (H=68.1 · warm forged metal · anchor 400 = brand gold #CC9E6C) ---- */ --narsil-bronze-50: #FEF5EC; --narsil-bronze-100: #FDE7D0; --narsil-bronze-200: #F1D1B1; --narsil-bronze-300: #DDB68B; --narsil-bronze-400: #CC9E6C; /* == --narsil-gold */ --narsil-bronze-500: #AD814F; --narsil-bronze-600: #91683A; --narsil-bronze-700: #735028; --narsil-bronze-800: #573C1C; --narsil-bronze-900: #3D2912; --narsil-bronze-950: #261707; /* ---- Slate scale (H=257.4 · cool tech chrome · anchor 600 = #64748B) ---- */ --narsil-slate-50: #F2F7FE; --narsil-slate-100: #E3ECF8; --narsil-slate-200: #CCD9EA; --narsil-slate-300: #AFBFD6; --narsil-slate-400: #94A6C0; --narsil-slate-500: #7B8CA5; --narsil-slate-600: #64748B; --narsil-slate-700: #4B596D; --narsil-slate-800: #384353; --narsil-slate-900: #262E3A; --narsil-slate-950: #151B23; /* ---- Deck DNA — measured brand colors (verbatim; some off-scale) ---- */ --narsil-deck-graphite: #36393C; /* == graphite-800 */ --narsil-deck-graphite-800: #2D3436; /* measured cool charcoal */ --narsil-deck-graphite-900: #1A1917; /* measured warm near-black */ --narsil-deck-bronze: #9B7753; /* measured bronze */ --narsil-deck-bronze-deep: #8C6239; /* LIGHT-theme accent (AA on ivory/white) */ --narsil-deck-grey-600: #595959; --narsil-deck-bluegrey: #78909C; --narsil-deck-slate-950: #0F172A; --narsil-deck-slate-600: #475569; /* AA muted on light (7.58:1 on white) */ --narsil-deck-slate-500: #64748B; /* == slate-600 */ --narsil-deck-slate-50: #F8FAFC; --narsil-deck-slate-200: #E2E8F0; /* ------------------------------------------------------------------------ 2. TYPOGRAPHY ------------------------------------------------------------------------ */ /* Families */ --narsil-font-display: "Cinzel", "Trajan Pro", Georgia, serif; /* heritage serif — logo/display */ --narsil-font-heading: "Montserrat", "Plus Jakarta Sans", system-ui, sans-serif; /* brand headings */ --narsil-font-sans: "Inter", "Plus Jakarta Sans", system-ui, sans-serif; /* body / UI */ /* Weights */ --narsil-weight-light: 300; --narsil-weight-regular: 400; --narsil-weight-medium: 500; --narsil-weight-semibold: 600; --narsil-weight-bold: 700; --narsil-weight-extrabold: 800; /* Type scale (base 1rem = 16px · ratio ~1.25 major-third) */ --narsil-text-xs: 0.75rem; /* 12px */ --narsil-text-sm: 0.875rem; /* 14px */ --narsil-text-base: 1rem; /* 16px */ --narsil-text-lg: 1.125rem; /* 18px */ --narsil-text-xl: 1.25rem; /* 20px */ --narsil-text-2xl: 1.5rem; /* 24px */ --narsil-text-3xl: 1.875rem; /* 30px */ --narsil-text-4xl: 2.25rem; /* 36px */ --narsil-text-5xl: 3rem; /* 48px */ --narsil-text-6xl: 3.75rem; /* 60px */ --narsil-text-7xl: 4.5rem; /* 72px */ --narsil-text-8xl: 6rem; /* 96px */ --narsil-text-9xl: 8rem; /* 128px */ /* Line heights */ --narsil-leading-tight: 1.1; --narsil-leading-snug: 1.25; --narsil-leading-normal: 1.5; --narsil-leading-relaxed: 1.75; /* Letter spacing (display serif caps use wider/widest) */ --narsil-tracking-tighter: -0.05em; --narsil-tracking-tight: -0.025em; --narsil-tracking-normal: 0em; --narsil-tracking-wide: 0.025em; --narsil-tracking-wider: 0.075em; --narsil-tracking-widest: 0.15em; /* ------------------------------------------------------------------------ 3. SPACE (4px grid) ------------------------------------------------------------------------ */ --narsil-space-0: 0; --narsil-space-px: 1px; --narsil-space-0-5: 0.125rem; /* 2px */ --narsil-space-1: 0.25rem; /* 4px */ --narsil-space-1-5: 0.375rem; /* 6px */ --narsil-space-2: 0.5rem; /* 8px */ --narsil-space-2-5: 0.625rem; /* 10px */ --narsil-space-3: 0.75rem; /* 12px */ --narsil-space-3-5: 0.875rem; /* 14px */ --narsil-space-4: 1rem; /* 16px */ --narsil-space-5: 1.25rem; /* 20px */ --narsil-space-6: 1.5rem; /* 24px */ --narsil-space-7: 1.75rem; /* 28px */ --narsil-space-8: 2rem; /* 32px */ --narsil-space-9: 2.25rem; /* 36px */ --narsil-space-10: 2.5rem; /* 40px */ --narsil-space-11: 2.75rem; /* 44px */ --narsil-space-12: 3rem; /* 48px */ --narsil-space-14: 3.5rem; /* 56px */ --narsil-space-16: 4rem; /* 64px */ --narsil-space-20: 5rem; /* 80px */ --narsil-space-24: 6rem; /* 96px */ /* ------------------------------------------------------------------------ 4. RADIUS (blade-crisp) ------------------------------------------------------------------------ */ --narsil-radius-none: 0; --narsil-radius-sm: 0.125rem; /* 2px */ --narsil-radius-md: 0.25rem; /* 4px */ --narsil-radius-lg: 0.5rem; /* 8px */ --narsil-radius-xl: 0.75rem; /* 12px */ --narsil-radius-2xl: 1rem; /* 16px */ --narsil-radius-full: 9999px; /* ------------------------------------------------------------------------ 5. SHADOW (low-key cinematic · ink tint rgba(21,20,16,α)) ------------------------------------------------------------------------ */ --narsil-shadow-sm: 0 1px 2px 0 rgba(21, 20, 16, 0.24); --narsil-shadow-md: 0 4px 12px -2px rgba(21, 20, 16, 0.30); --narsil-shadow-lg: 0 12px 32px -6px rgba(21, 20, 16, 0.38); --narsil-shadow-xl: 0 24px 64px -12px rgba(21, 20, 16, 0.46); /* ------------------------------------------------------------------------ 6. BORDER WIDTH ------------------------------------------------------------------------ */ --narsil-border-width-none: 0; --narsil-border-width-hairline: 1px; --narsil-border-width-thick: 2px; --narsil-border-width-heavy: 4px; /* ------------------------------------------------------------------------ 7. MOTION ------------------------------------------------------------------------ */ /* Durations */ --narsil-duration-instant: 50ms; --narsil-duration-fast: 120ms; --narsil-duration-normal: 200ms; --narsil-duration-slow: 320ms; --narsil-duration-slower: 500ms; --narsil-duration-deliberate: 720ms; /* Easings */ --narsil-ease-linear: linear; --narsil-ease-in: cubic-bezier(0.4, 0, 1, 1); /* exit */ --narsil-ease-out: cubic-bezier(0, 0, 0.2, 1); /* enter */ --narsil-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* move */ --narsil-ease-blade: cubic-bezier(0.7, 0, 0.15, 1); /* SIGNATURE — weighted start, sharp cut, precise settle */ --narsil-ease-forge: cubic-bezier(0.34, 1.2, 0.64, 1); /* strike overshoot for spark/emphasis */ /* ------------------------------------------------------------------------ 8. Z-INDEX ------------------------------------------------------------------------ */ --narsil-z-hide: -1; --narsil-z-base: 0; --narsil-z-docked: 10; --narsil-z-dropdown: 1000; --narsil-z-sticky: 1100; --narsil-z-banner: 1200; --narsil-z-overlay: 1300; --narsil-z-modal: 1400; --narsil-z-popover: 1500; --narsil-z-skip-link: 1600; --narsil-z-toast: 1700; --narsil-z-tooltip: 1800; } /* -------------------------------------------------------------------------- 9. COLOR PRIMITIVES — OKLCH progressive enhancement Pre-computed ground truth. Values verbatim from the token contract. -------------------------------------------------------------------------- */ @supports (color: oklch(0% 0 0)) { :root { /* ---- Singletons ---- */ --narsil-black: oklch(0.0% 0.0000 0.0); --narsil-white: oklch(100.0% 0.0000 89.9); --narsil-ink: oklch(19.1% 0.0080 95.5); --narsil-navy-black: oklch(24.3% 0.0335 271.2); --narsil-cream: oklch(90.0% 0.0098 72.7); --narsil-ivory: oklch(97.5% 0.0090 78.3); --narsil-gold: oklch(73.1% 0.0858 68.1); --narsil-amber: oklch(80.6% 0.1527 68.4); --narsil-link: oklch(62.3% 0.1880 259.8); --narsil-danger: oklch(57.8% 0.2063 29.0); /* ---- Graphite scale ---- */ --narsil-graphite-50: oklch(97.5% 0.0029 248.0); --narsil-graphite-100: oklch(94.0% 0.0043 248.0); --narsil-graphite-200: oklch(88.0% 0.0062 248.0); --narsil-graphite-300: oklch(80.0% 0.0081 248.0); --narsil-graphite-400: oklch(72.0% 0.0095 248.0); --narsil-graphite-500: oklch(63.5% 0.0095 248.0); --narsil-graphite-600: oklch(55.0% 0.0090 248.0); --narsil-graphite-700: oklch(46.0% 0.0081 248.0); --narsil-graphite-800: oklch(34.3% 0.0067 248.0); --narsil-graphite-900: oklch(30.0% 0.0052 248.0); --narsil-graphite-950: oklch(22.0% 0.0040 248.0); /* ---- Bronze scale ---- */ --narsil-bronze-50: oklch(97.5% 0.0158 68.1); --narsil-bronze-100: oklch(94.0% 0.0386 68.1); --narsil-bronze-200: oklch(88.0% 0.0558 68.1); --narsil-bronze-300: oklch(80.0% 0.0730 68.1); --narsil-bronze-400: oklch(73.1% 0.0858 68.1); --narsil-bronze-500: oklch(63.5% 0.0858 68.1); --narsil-bronze-600: oklch(55.0% 0.0816 68.1); --narsil-bronze-700: oklch(46.0% 0.0730 68.1); --narsil-bronze-800: oklch(38.0% 0.0601 68.1); --narsil-bronze-900: oklch(30.0% 0.0472 68.1); --narsil-bronze-950: oklch(22.0% 0.0361 68.1); /* ---- Slate scale ---- */ --narsil-slate-50: oklch(97.5% 0.0109 257.4); --narsil-slate-100: oklch(94.0% 0.0193 257.4); --narsil-slate-200: oklch(88.0% 0.0279 257.4); --narsil-slate-300: oklch(80.0% 0.0364 257.4); --narsil-slate-400: oklch(72.0% 0.0429 257.4); --narsil-slate-500: oklch(63.5% 0.0429 257.4); --narsil-slate-600: oklch(55.4% 0.0407 257.4); --narsil-slate-700: oklch(46.0% 0.0364 257.4); --narsil-slate-800: oklch(38.0% 0.0300 257.4); --narsil-slate-900: oklch(30.0% 0.0236 257.4); --narsil-slate-950: oklch(22.0% 0.0180 257.4); /* ---- Deck DNA ---- */ --narsil-deck-graphite: oklch(34.3% 0.0067 248.0); --narsil-deck-graphite-800: oklch(31.9% 0.0102 216.8); --narsil-deck-graphite-900: oklch(21.4% 0.0042 84.6); --narsil-deck-bronze: oklch(59.6% 0.0677 65.9); --narsil-deck-bronze-deep: oklch(53.1% 0.0786 64.1); --narsil-deck-grey-600: oklch(46.4% 0.0000 89.9); --narsil-deck-bluegrey: oklch(63.9% 0.0327 229.5); --narsil-deck-slate-950: oklch(20.8% 0.0398 265.8); --narsil-deck-slate-600: oklch(44.6% 0.0374 257.3); --narsil-deck-slate-500: oklch(55.4% 0.0407 257.4); --narsil-deck-slate-50: oklch(98.4% 0.0034 247.9); --narsil-deck-slate-200: oklch(92.9% 0.0126 255.5); } } /* ========================================================================== 10. SEMANTIC THEME TOKENS ========================================================================== Aliases only — every value is a var() reference to a primitive above, so hex/OKLCH resolution is inherited automatically. Contrast figures are WCAG 2.1, verified against the contract. NOTE on gold: #CC9E6C on graphite-800 is 4.80:1 — AA for normal text but tight. Prefer gold for large/display text and accents; use cream or bronze-100 for long body copy on dark surfaces. ========================================================================== */ /* ---- LIGHT (default) — editorial: ivory/white canvas · graphite text · bronze-deep/gold accent ---- */ :root { color-scheme: light; /* Backgrounds */ --narsil-bg-canvas: var(--narsil-ivory); /* #FAF6F0 */ --narsil-bg-surface: var(--narsil-white); /* #FFFFFF */ --narsil-bg-raised: var(--narsil-white); /* elevation via shadow-md/lg */ --narsil-bg-inverse: var(--narsil-graphite-800); /* pairs with text-inverse */ /* Text */ --narsil-text-primary: var(--narsil-graphite-800); /* 10.79:1 on canvas — AA */ --narsil-text-secondary: var(--narsil-graphite-700); /* 6.64:1 on canvas — AA */ --narsil-text-muted: var(--narsil-graphite-600); /* 4.84:1 on surface — AA; de-emphasized UI, not long body */ --narsil-text-inverse: var(--narsil-ivory); /* 10.79:1 on bg-inverse — AA */ --narsil-text-on-accent: var(--narsil-white); /* 5.36:1 on accent — AA */ /* Borders */ --narsil-border-subtle: var(--narsil-graphite-100); --narsil-border-default: var(--narsil-graphite-200); --narsil-border-strong: var(--narsil-graphite-400); /* Accent (forged bronze) */ --narsil-accent: var(--narsil-deck-bronze-deep); /* 4.97:1 on canvas — AA */ --narsil-accent-hover: var(--narsil-bronze-700); /* 6.71:1 on canvas — AA */ --narsil-accent-muted: var(--narsil-bronze-100); /* tint surface */ --narsil-accent-contrast: var(--narsil-white); /* fg on accent; on a GOLD fill use ink (8.67:1) instead */ /* Focus */ --narsil-focus-ring: var(--narsil-deck-bronze-deep); /* Status */ --narsil-status-info: var(--narsil-link); /* 3.68:1 on surface — AA-large (large text/icons/underlined links) */ --narsil-status-danger: var(--narsil-danger); /* 4.77:1 on surface — AA */ } /* ---- DARK via OS preference — cinematic: graphite-950 canvas · ivory/cream text · gold accent. Keep in sync with the [data-theme="dark"] block below. ---- */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; /* Backgrounds */ --narsil-bg-canvas: var(--narsil-graphite-950); --narsil-bg-surface: var(--narsil-graphite-900); --narsil-bg-raised: var(--narsil-graphite-800); /* brand PRIMARY DARK; lighter than surface */ --narsil-bg-inverse: var(--narsil-ivory); /* Text */ --narsil-text-primary: var(--narsil-ivory); /* 12.66:1 surface / 16.06:1 canvas — AA */ --narsil-text-secondary: var(--narsil-cream); /* 10.10:1 surface / 8.61:1 raised — AA */ --narsil-text-muted: var(--narsil-graphite-400); /* 5.49:1 surface / 4.68:1 raised — AA */ --narsil-text-inverse: var(--narsil-graphite-800); /* 10.79:1 on bg-inverse — AA */ --narsil-text-on-accent: var(--narsil-ink); /* 7.61:1 on accent (gold) — AA */ /* Borders */ --narsil-border-subtle: var(--narsil-graphite-800); --narsil-border-default: var(--narsil-graphite-700); --narsil-border-strong: var(--narsil-graphite-500); /* Accent (inlaid gold) */ --narsil-accent: var(--narsil-gold); /* 5.63:1 surface / 7.14:1 canvas / 4.80:1 raised — AA (prefer large/display + accents) */ --narsil-accent-hover: var(--narsil-amber); /* 6.17:1 raised / 9.18:1 canvas — AA */ --narsil-accent-muted: var(--narsil-bronze-900); /* tint surface */ --narsil-accent-contrast: var(--narsil-ink); /* fg on gold/amber fills (8.67:1) */ /* Focus */ --narsil-focus-ring: var(--narsil-gold); /* Status */ --narsil-status-info: var(--narsil-link); /* 4.70:1 canvas — AA; ~3.2:1 surface — AA-large (large/icons) */ --narsil-status-danger: var(--narsil-danger); /* 3.62:1 canvas — AA-large (large text/icons/status fills) */ } } /* ---- DARK via explicit opt-in (whole page or scoped subtree) ---- */ [data-theme="dark"] { color-scheme: dark; /* Backgrounds */ --narsil-bg-canvas: var(--narsil-graphite-950); --narsil-bg-surface: var(--narsil-graphite-900); --narsil-bg-raised: var(--narsil-graphite-800); --narsil-bg-inverse: var(--narsil-ivory); /* Text */ --narsil-text-primary: var(--narsil-ivory); --narsil-text-secondary: var(--narsil-cream); --narsil-text-muted: var(--narsil-graphite-400); --narsil-text-inverse: var(--narsil-graphite-800); --narsil-text-on-accent: var(--narsil-ink); /* Borders */ --narsil-border-subtle: var(--narsil-graphite-800); --narsil-border-default: var(--narsil-graphite-700); --narsil-border-strong: var(--narsil-graphite-500); /* Accent */ --narsil-accent: var(--narsil-gold); --narsil-accent-hover: var(--narsil-amber); --narsil-accent-muted: var(--narsil-bronze-900); --narsil-accent-contrast: var(--narsil-ink); /* Focus */ --narsil-focus-ring: var(--narsil-gold); /* Status */ --narsil-status-info: var(--narsil-link); --narsil-status-danger: var(--narsil-danger); } /* ---- LIGHT via explicit opt-in — declared LAST so it overrides the prefers-color-scheme:dark block at equal specificity ---- */ [data-theme="light"] { color-scheme: light; /* Backgrounds */ --narsil-bg-canvas: var(--narsil-ivory); --narsil-bg-surface: var(--narsil-white); --narsil-bg-raised: var(--narsil-white); --narsil-bg-inverse: var(--narsil-graphite-800); /* Text */ --narsil-text-primary: var(--narsil-graphite-800); --narsil-text-secondary: var(--narsil-graphite-700); --narsil-text-muted: var(--narsil-graphite-600); --narsil-text-inverse: var(--narsil-ivory); --narsil-text-on-accent: var(--narsil-white); /* Borders */ --narsil-border-subtle: var(--narsil-graphite-100); --narsil-border-default: var(--narsil-graphite-200); --narsil-border-strong: var(--narsil-graphite-400); /* Accent */ --narsil-accent: var(--narsil-deck-bronze-deep); --narsil-accent-hover: var(--narsil-bronze-700); --narsil-accent-muted: var(--narsil-bronze-100); --narsil-accent-contrast: var(--narsil-white); /* Focus */ --narsil-focus-ring: var(--narsil-deck-bronze-deep); /* Status */ --narsil-status-info: var(--narsil-link); --narsil-status-danger: var(--narsil-danger); }