/* ══════════════════════════════════════════════════════════════ tokens.css — NMMI · ai @layer tokens | Single source of truth for all design values. Two-tier architecture Tier 1 — Primitive tokens (raw values, never used in components) Tier 2 — Semantic tokens (intent-named; always what components reference) Theme variants driven by [data-theme] + [data-mode] on . ══════════════════════════════════════════════════════════════ */ @layer tokens { /* ── Tier 1: Primitive scale ────────────────────────────── */ :root { /* Shell geometry */ --_nav-h: 56px; --_rail-w: 60px; --_drawer-w: 174px; --_hairline: 1px; /* Content-area caps */ --_content-col-max: 760px; --_content-col-wide: 1080px; /* Radius primitives */ --_radius-sm: 4px; --_radius-md: 6px; --_radius-lg: 8px; --_radius-xl: 12px; --_radius-full: 9999px; /* Transition primitives */ --_transition-fast: 0.18s ease; --_transition-layout: 0.28s cubic-bezier(0.4, 0, 0.2, 1); } /* ── Tier 2: Semantic layout tokens ────────────────────── */ :root { --nav-h: var(--_nav-h); --rail-w: var(--_rail-w); --drawer-w: var(--_drawer-w); --hairline: var(--_hairline); /* Right drawer — static width, never varies with left drawer state. Uses its own token so .sidebar-right is immune to --side-w changes. */ --rdrawer-w: var(--_drawer-w); /* Responsive content padding Ceiling reduced from 2rem → 1.5rem to prevent excessive side gutters. .content-area applies this once; .content-wrap does NOT re-apply it. */ --content-pad-inline: clamp(0.75rem, 3vw, 1.5rem); --content-pad-block: clamp(1rem, 3vw, 1.5rem); --content-col-max: var(--_content-col-max); --content-col-wide: var(--_content-col-wide); /* Fluid type scale (WCAG-safe: rem + vi, not pure vw) --t-xs floor raised to 0.75rem (12px) — gold §5 minimum floor */ --t-xs: clamp(0.75rem, 0.72rem + 0.18vi, 0.875rem); --t-sm: clamp(0.8rem, 0.76rem + 0.22vi, 0.9375rem); --t-base: clamp(0.875rem, 0.84rem + 0.22vi, 1rem); --t-lg: clamp(1rem, 0.92rem + 0.48vi, 1.25rem); --t-xl: clamp(1.25rem, 1rem + 1.20vi, 2rem); --t-hero: clamp(1.5rem, 1rem + 2.50vi, 2.4rem); /* Fluid space scale */ --space-xs: clamp(0.25rem, 0.5vw, 0.5rem); --space-sm: clamp(0.5rem, 1vw, 0.75rem); --space-md: clamp(0.75rem, 1.5vw, 1.25rem); --space-lg: clamp(1rem, 2.5vw, 1.5rem); --space-xl: clamp(1.5rem, 4vw, 2.5rem); /* Radius semantic tokens */ --radius-sm: var(--_radius-sm); --radius-md: var(--_radius-md); --radius-lg: var(--_radius-lg); --radius-xl: var(--_radius-xl); --radius-full: var(--_radius-full); /* Typography family tokens — SPEC §11: system-UI only, no external CDN */ --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --font-mono: "Courier New", Courier, monospace; /* Transition semantic tokens */ --transition-fast: var(--_transition-fast); --transition-layout: var(--_transition-layout); /* Focus-ring tokens */ --focus-ring: 2px solid var(--theme); --focus-ring-offset: 2px; /* Z-index stack tokens */ --z-modal: 50; /* Overlay / modal geometry tokens */ --overlay-scrim: rgba(0, 0, 0, 0.55); --modal-panel-w: 480px; --input-h: 38px; /* ── Teal chip alias tokens ───────────────────────────── --teal / --teal-bg / --teal-border are used by .chip-teal. They alias the accent tokens so the chip always matches the theme accent colour and stays in sync across all theme variants. */ --teal: var(--accent); --teal-bg: var(--accent-bg); --teal-border: var(--accent-border); } /* Left drawer state → --side-w semantic alias (left sidebar only) */ html[data-drawer="open"] { --side-w: var(--drawer-w); } html[data-drawer="closed"] { --side-w: var(--rail-w); } /* Right drawer state → --rdrawer-offset Used by .content-area padding-inline-end to clear the overlay panel. JS must toggle data-rdrawer="open"|"closed" on when the right drawer opens/closes (mirrors the existing data-drawer pattern). */ html[data-rdrawer="open"] { --rdrawer-offset: var(--rdrawer-w); } html[data-rdrawer="closed"] { --rdrawer-offset: 0px; } /* ══════════════════════════════════════════════════════════ THEME VARIANTS ══════════════════════════════════════════════════════════ */ /* BLUE · DARK */ html[data-theme="blue"][data-mode="dark"] { --bg-body: #0b0f14; --bg-surface: #0e1520; --bg-surface-2: #121a29; --bg-panel: #101822; --bg-input: var(--bg-body); --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.06); --accent-rgb: 0,210,210; --accent: rgba(var(--accent-rgb),0.7); --accent-dim: rgba(var(--accent-rgb),0.60); --accent-border: rgba(var(--accent-rgb),0.35); --accent-bg: rgba(var(--accent-rgb),0.12); --accent-glow: rgba(var(--accent-rgb),0.25); --gold: rgba(201,168,76,0.80); --gold-border: rgba(201,168,76,0.35); --gold-bg: rgba(201,168,76,0.08); --ok: rgba(34,197,94,0.85); --warn: rgba(245,158,11,0.85); --err: rgba(239,68,68,0.85); --info: rgba(96,165,250,0.85); --ok-bg: rgba(34,197,94,0.07); --warn-bg: rgba(245,158,11,0.07); --err-bg: rgba(239,68,68,0.07); --info-bg: rgba(96,165,250,0.07); --ok-bd: rgba(34,197,94,0.30); --warn-bd: rgba(245,158,11,0.30); --err-bd: rgba(239,68,68,0.30); --info-bd: rgba(96,165,250,0.30); --text-hi: rgba(220,232,240,0.95); --text: rgba(180,200,215,0.85); --text-mid: rgba(180,200,215,0.72); --text-low: rgba(140,165,185,0.60); --text-faint: rgba(100,130,155,0.50); --shadow-sm: 0 1px 4px rgba(0,0,0,0.40); --shadow-md: 0 2px 12px rgba(0,0,0,0.45); --theme-rgb: 0,210,210; --theme: rgba(0,210,210,0.95); --theme-dim: rgba(0,210,210,0.55); --theme-border: rgba(0,210,210,0.45); --theme-bg: rgba(0,210,210,0.10); --theme-glow: rgba(0,210,210,0.55); --hero-gray: rgba(176,176,176,0.85); } /* BLUE · LIGHT */ html[data-theme="blue"][data-mode="light"] { --bg-body: #f4f5f7; --bg-surface: #ffffff; --bg-surface-2: #f8f9fa; --bg-panel: #ffffff; --bg-input: var(--bg-body); --border: rgba(0,0,0,0.09); --border-soft: rgba(0,0,0,0.06); --accent-rgb: 0,110,130; --accent: rgba(var(--accent-rgb),0.7); --accent-dim: rgba(var(--accent-rgb),0.60); --accent-border: rgba(var(--accent-rgb),0.35); --accent-bg: rgba(var(--accent-rgb),0.12); --accent-glow: rgba(var(--accent-rgb),0.25); --gold: rgba(154,116,32,0.80); --gold-border: rgba(154,116,32,0.35); --gold-bg: rgba(154,116,32,0.07); --ok: rgba(22,163,74,0.85); --warn: rgba(180,83,9,0.85); --err: rgba(185,28,28,0.85); --info: rgba(37,99,235,0.85); --ok-bg: rgba(22,163,74,0.07); --warn-bg: rgba(180,83,9,0.07); --err-bg: rgba(185,28,28,0.07); --info-bg: rgba(37,99,235,0.07); --ok-bd: rgba(22,163,74,0.30); --warn-bd: rgba(180,83,9,0.30); --err-bd: rgba(185,28,28,0.30); --info-bd: rgba(37,99,235,0.30); --text-hi: rgba(15,30,40,0.92); --text: rgba(30,55,70,0.80); --text-mid: rgba(30,55,70,0.72); --text-low: rgba(50,80,95,0.60); --text-faint: rgba(80,110,125,0.50); --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 1px 8px rgba(0,0,0,0.08); --theme-rgb: 0,110,130; --theme: rgba(0,110,130,0.95); --theme-dim: rgba(0,110,130,0.55); --theme-border: rgba(0,110,130,0.45); --theme-bg: rgba(0,110,130,0.10); --theme-glow: rgba(0,110,130,0.55); --hero-gray: rgba(74,74,74,0.85); } /* GRAY · DARK */ html[data-theme="gray"][data-mode="dark"] { --bg-body: #0f0f0f; --bg-surface: #141414; --bg-surface-2: #191919; --bg-panel: #171717; --bg-input: var(--bg-body); --border: rgba(255,255,255,0.09); --border-soft: rgba(255,255,255,0.06); --accent-rgb: 34,255,0; --accent: rgba(var(--accent-rgb),0.7); --accent-dim: rgba(var(--accent-rgb),0.60); --accent-border: rgba(var(--accent-rgb),0.35); --accent-bg: rgba(var(--accent-rgb),0.12); --accent-glow: rgba(var(--accent-rgb),0.25); --gold: rgba(201,168,76,0.80); --gold-border: rgba(201,168,76,0.35); --gold-bg: rgba(201,168,76,0.08); --ok: rgba(34,197,94,0.85); --warn: rgba(245,158,11,0.85); --err: rgba(239,68,68,0.85); --info: rgba(96,165,250,0.85); --ok-bg: rgba(34,197,94,0.07); --warn-bg: rgba(245,158,11,0.07); --err-bg: rgba(239,68,68,0.07); --info-bg: rgba(96,165,250,0.07); --ok-bd: rgba(34,197,94,0.30); --warn-bd: rgba(245,158,11,0.30); --err-bd: rgba(239,68,68,0.30); --info-bd: rgba(96,165,250,0.30); --text-hi: rgba(230,230,230,0.95); --text: rgba(197,197,197,0.85); --text-mid: rgba(197,197,197,0.72); --text-low: rgba(161,161,161,0.60); --text-faint: rgba(125,125,125,0.50); --shadow-sm: 0 1px 4px rgba(0,0,0,0.40); --shadow-md: 0 2px 12px rgba(0,0,0,0.45); --theme-rgb: 34,255,0; --grayscale: 255,255,255; --theme: rgba(var(--grayscale),0.95); --theme-dim: rgba(var(--grayscale),0.55); --theme-border: rgba(var(--grayscale),0.45); --theme-bg: rgba(var(--grayscale),0.10); --theme-glow: rgba(var(--grayscale),0.55); --hero-gray: rgba(176,176,176,0.85); } /* GRAY · LIGHT */ html[data-theme="gray"][data-mode="light"] { --bg-body: #f5f5f5; --bg-surface: #ffffff; --bg-surface-2: #f9f9f9; --bg-panel: #ffffff; --bg-input: var(--bg-body); --border: rgba(0,0,0,0.09); --border-soft: rgba(0,0,0,0.06); --accent-rgb: 0,138,0; --accent: rgba(var(--accent-rgb),0.7); --accent-dim: rgba(var(--accent-rgb),0.60); --accent-border: rgba(var(--accent-rgb),0.35); --accent-bg: rgba(var(--accent-rgb),0.12); --accent-glow: rgba(var(--accent-rgb),0.25); --gold: rgba(154,116,32,0.80); --gold-border: rgba(154,116,32,0.35); --gold-bg: rgba(154,116,32,0.07); --ok: rgba(22,163,74,0.85); --warn: rgba(180,83,9,0.85); --err: rgba(185,28,28,0.85); --info: rgba(37,99,235,0.85); --ok-bg: rgba(22,163,74,0.07); --warn-bg: rgba(180,83,9,0.07); --err-bg: rgba(185,28,28,0.07); --info-bg: rgba(37,99,235,0.07); --ok-bd: rgba(22,163,74,0.30); --warn-bd: rgba(180,83,9,0.30); --err-bd: rgba(185,28,28,0.30); --info-bd: rgba(37,99,235,0.30); --text-hi: rgba(28,28,28,0.92); --text: rgba(51,51,51,0.80); --text-mid: rgba(51,51,51,0.72); --text-low: rgba(75,75,75,0.60); --text-faint: rgba(105,105,105,0.50); --shadow-sm: 0 1px 4px rgba(0,0,0,0.08); --shadow-md: 0 1px 8px rgba(0,0,0,0.08); --grayscale: 0,0,0; --theme-rgb: 0,138,0; --theme: rgba(var(--grayscale),0.95); --theme-dim: rgba(var(--grayscale),0.55); --theme-border: rgba(var(--grayscale),0.45); --theme-bg: rgba(var(--grayscale),0.10); --theme-glow: rgba(var(--grayscale),0.55); --hero-gray: rgba(74,74,74,0.85); } }