/* ========================================================================== TOKENS.CSS — Design System Semantic layer. Maps meaning to primitives. RULES (hard): ✗ Never write a hex value here — reference primitives only ✗ Never use --dap-* tokens on web surfaces (homepage, landing pages, PPC) ✗ Never use web tokens inside deck / audit slides ✓ Components and layouts consume ONLY tokens from this file ✓ To switch light ↔ dark: toggle data-theme on or any
Load order: Theme switching (JS, one line): document.documentElement.setAttribute('data-theme', 'dark') document.documentElement.setAttribute('data-theme', 'light') ========================================================================== */ /* ========================================================================== LIGHT MODE — default (:root) ========================================================================== */ :root { /* -------------------------------------------------------------------------- TYPOGRAPHY TOKENS -------------------------------------------------------------------------- */ /* Families */ --t-font-display: var(--font-display); --t-font-body: var(--font-body); --t-font-mono: var(--font-mono); /* Fluid sizes — headings (clamp auto-scales, no media query needed) */ --t-h1: clamp(27px, 3.75vw, 57px); --t-h2: clamp(28px, 4vw, 56px); --t-h3: clamp(20px, 3vw, 32px); --t-h4: var(--text-lg); --t-h5: var(--text-base); --t-h6: var(--text-sm); /* Fixed sizes */ --t-body-lg: var(--text-md); --t-body: var(--text-base); --t-small: var(--text-sm); --t-caption: var(--text-xs); --t-code: var(--text-sm); --t-label: var(--text-sm); /* Weights */ --t-weight-heading: var(--weight-bold); --t-weight-subhead: var(--weight-semibold); --t-weight-ui: var(--weight-medium); --t-weight-body: var(--weight-regular); --t-weight-meta: var(--weight-medium); /* Line heights */ --t-leading-heading: var(--leading-tight); --t-leading-body: var(--leading-relaxed); --t-leading-ui: var(--leading-normal); /* -------------------------------------------------------------------------- BACKGROUND TOKENS -------------------------------------------------------------------------- */ --bg-page: var(--gray-50); --bg-surface: var(--gray-0); --bg-surface-raised: var(--gray-0); --bg-section-alt: var(--gray-100); --bg-section-dark: var(--secondary-800); --bg-overlay: var(--black-50); --bg-tooltip: var(--secondary-800); --bg-code: var(--gray-100); --bg-skeleton: var(--gray-200); --bg-input: var(--gray-0); --bg-input-disabled: var(--gray-100); /* -------------------------------------------------------------------------- TEXT TOKENS -------------------------------------------------------------------------- */ --text-heading: var(--secondary-800); --text-main: var(--gray-800); --text-muted: var(--gray-500); --text-disabled: var(--gray-400); --text-inverse: var(--gray-0); --text-inverse-muted:var(--white-70); --text-on-dark: var(--white-90); --text-on-dark-muted:var(--white-60); --text-link: var(--primary-500); --text-link-hover: var(--primary-600); --text-code: var(--secondary-700); --text-tooltip: var(--white-90); --text-placeholder: var(--gray-400); /* -------------------------------------------------------------------------- BORDER TOKENS -------------------------------------------------------------------------- */ --border-subtle: var(--black-10); --border-default: var(--black-15); --border-strong: var(--black-30); --border-focus: var(--primary-500); --border-on-dark: var(--white-15); /* -------------------------------------------------------------------------- BRAND / ACTION TOKENS -------------------------------------------------------------------------- */ --accent-main: var(--primary-500); --accent-hover: var(--primary-600); --accent-active: var(--primary-700); --accent-subtle: var(--primary-a10); --accent-subtle-hover:var(--primary-a20); --brand-primary: var(--secondary-800); --brand-secondary: var(--primary-500); --structural-main: var(--secondary-700); --structural-light: var(--secondary-600); /* -------------------------------------------------------------------------- FEEDBACK — SUCCESS -------------------------------------------------------------------------- */ --bg-success: var(--green-50); --text-success: var(--green-600); --border-success: var(--green-300); --icon-success: var(--green-400); /* FEEDBACK — ERROR */ --bg-error: var(--red-50); --text-error: var(--red-600); --border-error: var(--red-300); --icon-error: var(--red-500); /* FEEDBACK — WARNING */ --bg-warning: var(--amber-50); --text-warning: var(--amber-700); --border-warning: var(--amber-300); --icon-warning: var(--amber-500); /* FEEDBACK — INFO */ --bg-info: var(--blue-50); --text-info: var(--blue-700); --border-info: var(--blue-300); --icon-info: var(--blue-500); /* -------------------------------------------------------------------------- SHADOW TOKENS -------------------------------------------------------------------------- */ --shadow-xs: var(--shadow-raw-xs); --shadow-surface: var(--shadow-raw-sm); --shadow-raised: var(--shadow-raw-md); --shadow-overlay: var(--shadow-raw-lg); --shadow-focus: 0 0 0 3px var(--primary-a20); /* -------------------------------------------------------------------------- LAYOUT TOKENS — base (mobile-first) Overridden per breakpoint below -------------------------------------------------------------------------- */ --container-max: 1200px; --container-padding-x: var(--space-8); --layout-gap: var(--space-6); --layout-columns: 1; --section-padding-y: var(--space-20); /* 40px — consistent top/bottom for every section */ --card-padding: var(--space-8) var(--space-12); --card-radius: var(--radius-lg); --card-border: 1px solid var(--border-subtle); --input-height: 48px; --input-padding: var(--space-4) var(--space-8); --input-radius: var(--radius-md); --input-border: 1px solid var(--border-default); --input-border-focus: 2px solid var(--border-focus); --btn-radius: var(--radius-full); --navbar-height: 56px; --sidebar-width: 240px; --sidebar-width-sm: 64px; /* -------------------------------------------------------------------------- MOTION TOKENS -------------------------------------------------------------------------- */ --transition-fast: var(--dur-fast) var(--ease-out); --transition-base: var(--dur-base) var(--ease-standard); --transition-slow: var(--dur-slow) var(--ease-standard); --transition-enter: var(--dur-slow) var(--ease-enter); --transition-exit: var(--dur-base) var(--ease-exit); --transition-spring: var(--dur-slow) var(--ease-spring); /* -------------------------------------------------------------------------- Z-INDEX SCALE -------------------------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ========================================================================== RESPONSIVE LAYOUT OVERRIDES Only layout/spacing tokens change across breakpoints. Color, typography, and component tokens stay identical — they don't depend on viewport size. Fluid type (clamp) handles headings automatically. ========================================================================== */ /* Tablet — ≥ 768px */ @media (min-width: 768px) { :root { --container-padding-x: var(--space-12); --layout-gap: var(--space-8); --layout-columns: 2; --section-padding-y: var(--space-20); --navbar-height: 64px; --card-padding: var(--space-10) var(--space-12); } } /* Desktop — ≥ 1024px */ @media (min-width: 1024px) { :root { --container-padding-x: var(--space-20); --layout-gap: var(--space-10); --layout-columns: 12; --section-padding-y: var(--space-20); --card-padding: var(--space-12); } } /* Wide — ≥ 1280px */ @media (min-width: 1280px) { :root { --container-padding-x: var(--space-20); --section-padding-y: var(--space-20); } } /* ========================================================================== DARK MODE [data-theme="dark"] Apply to for full-page dark: Or per section (dark hero on a light page):
Only color tokens are overridden. Layout, spacing, motion, z-index remain identical — they have no dark variant. ========================================================================== */ [data-theme="dark"] { /* Backgrounds */ --bg-page: var(--secondary-800); --bg-surface: var(--secondary-700); --bg-surface-raised: var(--secondary-600); --bg-section-alt: var(--secondary-900); --bg-overlay: var(--black-70); --bg-tooltip: var(--gray-800); --bg-code: var(--secondary-700); --bg-skeleton: var(--secondary-700); --bg-input: var(--secondary-700); --bg-input-disabled: var(--secondary-900); /* Text */ --text-heading: var(--white-100); --text-main: var(--white-90); --text-muted: var(--white-50); --text-disabled: var(--white-30); --text-inverse: var(--secondary-800); --text-link: var(--primary-400); --text-link-hover: var(--primary-300); --text-code: var(--primary-200); --text-placeholder: var(--white-30); /* Borders */ --border-subtle: var(--white-10); --border-default: var(--white-15); --border-strong: var(--white-30); --border-focus: var(--primary-500); --border-on-dark: var(--black-20); /* Action */ --accent-main: var(--primary-500); --accent-hover: var(--primary-400); --accent-active: var(--primary-300); --accent-subtle: var(--primary-a15); --accent-subtle-hover:var(--primary-a30); /* Structural */ --structural-main: var(--secondary-300); --structural-light: var(--secondary-200); /* Feedback — adjusted for dark bg contrast */ --bg-success: var(--green-700); --text-success: var(--green-200); --border-success: var(--green-500); --icon-success: var(--green-300); --bg-error: var(--red-700); --text-error: var(--red-200); --border-error: var(--red-500); --icon-error: var(--red-300); --bg-warning: var(--amber-800); --text-warning: var(--amber-200); --border-warning: var(--amber-500); --icon-warning: var(--amber-300); --bg-info: var(--blue-800); --text-info: var(--blue-200); --border-info: var(--blue-500); --icon-info: var(--blue-300); /* Shadows — reduced, elevation via surface color not shadow depth */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.30); --shadow-surface: 0 1px 1px rgba(0,0,0,0.20), 0 4px 8px -2px rgba(0,0,0,0.40); --shadow-raised: 0 4px 12px rgba(0,0,0,0.50); --shadow-overlay: 0 8px 32px rgba(0,0,0,0.60); --shadow-focus: 0 0 0 3px var(--primary-a30); } /* ========================================================================== DARK SECTION UTILITY [data-theme="dark-section"] For isolated dark sections on an otherwise light page — dark hero, dark footer, dark CTA band. Uses the same dark color tokens without changing the page-level theme. ========================================================================== */ [data-theme="dark-section"] { --bg-page: var(--secondary-800); --bg-surface: var(--secondary-700); --bg-section-alt: var(--secondary-900); --bg-input: var(--secondary-700); --text-heading: var(--white-100); --text-main: var(--white-90); --text-muted: var(--white-50); --text-disabled: var(--white-30); --text-placeholder: var(--white-30); --border-subtle: var(--white-10); --border-default: var(--white-15); --border-strong: var(--white-30); --accent-main: var(--primary-500); --accent-hover: var(--primary-400); --structural-main: var(--secondary-300); --structural-light: var(--secondary-200); } /* ========================================================================== --dap-* DECK / AUDIT SYSTEM Fully isolated. Dark-bg, Lato/Mono. NEVER cross-pollinate with web tokens on the same page. ========================================================================== */ :root { --dap-navy: #061C2C; --dap-orange: #F2501E; --dap-blue: #4285F4; --dap-cyan: #00B4D8; --dap-slate: #364D5D; --dap-dark-teal: #1E3342; --dap-deep-navy: #052236; --dap-purple: #644CA5; --dap-green: #70AD47; --dap-card: #0D2A3F; --dap-card-2: #102F46; --dap-border: #1A3A4F; --dap-deep: #041824; --dap-yellow: #F5B30B; --dap-red: #E04040; --dap-orange-soft: rgba(242,80,30,0.12); --dap-cyan-soft: rgba(0,180,216,0.12); --dap-green-soft: rgba(118,192,67,0.15); --dap-yellow-soft: rgba(245,179,11,0.15); --dap-red-soft: rgba(224,64,64,0.15); --dap-purple-soft: rgba(100,76,165,0.20); --dap-white: #FFFFFF; --dap-muted: #B0BEC5; --dap-dim: rgba(255,255,255,0.55); --dap-text-dark: #1A1A2E; --dap-bg-light: #FFFFFF; --dap-bg-subtle: #F5F5F5; --dap-callout-bg: #FFF0EB; --dap-font: 'Lato', 'Calibri', system-ui, -apple-system, sans-serif; --dap-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; --dap-radius-sm: 4px; --dap-radius-md: 8px; --dap-radius-lg: 14px; --dap-radius-pill: 999px; --dap-shadow-sm: 0 2px 6px rgba(0,0,0,0.15); --dap-shadow-md: 0 8px 24px rgba(0,0,0,0.25); --dap-shadow-lg: 0 20px 48px rgba(0,0,0,0.35); --dap-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --dap-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --dap-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); --dap-press: 160ms var(--dap-ease-out); --dap-fast: 200ms var(--dap-ease-out); --dap-med: 280ms var(--dap-ease-out); } /* ========================================================================== REDUCED MOTION — mandatory override ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }