/* ============================================================ LOCALACT — Tier 3 · SEMANTIC · DESIGN-SYSTEM.md §2 / §6 / §7 ------------------------------------------------------------ Role-based tokens — the ONLY layer components should consume. Points at Tier 2 brand vars or static neutral/status values. Light theme lives in :root; dark theme remaps via `.theme-dark` (stub — neutral inversions only; tones are never touched in dark). Every surface travels with its readable content color (-on-surface). ============================================================ */ :root, .theme-light { /* ── Brand surfaces ────────────────────────────────────────── on-surface is an explicit design choice (white on orange/navy/teal is the brand's call; gold is luminous → dark content). subtle = 50 tint (tinted panels) · soft = 100 tint (active-nav, badges). */ --la-brand-primary-surface: var(--la-brand-primary-500); --la-brand-primary-surface-hover: var(--la-brand-primary-600); --la-brand-primary-on-surface: #ffffff; --la-brand-primary-subtle: var(--la-brand-primary-50); --la-brand-primary-on-subtle: var(--la-brand-primary-800); --la-brand-primary-soft: var(--la-brand-primary-100); --la-brand-primary-on-soft: var(--la-brand-primary-800); --la-brand-secondary-surface: var(--la-brand-secondary-500); --la-brand-secondary-surface-hover: var(--la-brand-secondary-600); --la-brand-secondary-on-surface: #ffffff; --la-brand-secondary-subtle: var(--la-brand-secondary-50); --la-brand-secondary-on-subtle: var(--la-brand-secondary-800); --la-brand-secondary-soft: var(--la-brand-secondary-100); --la-brand-secondary-on-soft: var(--la-brand-secondary-800); --la-brand-tertiary-surface: var(--la-brand-tertiary-500); --la-brand-tertiary-surface-hover: var(--la-brand-tertiary-600); --la-brand-tertiary-on-surface: #ffffff; --la-brand-tertiary-subtle: var(--la-brand-tertiary-50); --la-brand-tertiary-on-subtle: var(--la-brand-tertiary-800); --la-brand-tertiary-soft: var(--la-brand-tertiary-100); --la-brand-tertiary-on-soft: var(--la-brand-tertiary-800); --la-brand-quaternary-surface: var(--la-brand-quaternary-500); --la-brand-quaternary-surface-hover: var(--la-brand-quaternary-600); --la-brand-quaternary-on-surface: #171717; --la-brand-quaternary-subtle: var(--la-brand-quaternary-50); --la-brand-quaternary-on-subtle: var(--la-brand-quaternary-800); --la-brand-quaternary-soft: var(--la-brand-quaternary-100); --la-brand-quaternary-on-soft: var(--la-brand-quaternary-800); /* ── Neutral surfaces / text / border ────────────────────── */ --la-surface: var(--la-neutral-50); /* page background */ --la-surface-raised: var(--la-neutral-0); /* white — cards, sidebar */ --la-surface-sunken: var(--la-neutral-100); /* inset panels / wells */ --la-surface-inverse: var(--la-brand-secondary-900); --la-text-heading: var(--la-neutral-900); --la-text-body: var(--la-neutral-800); /* brand body gray #3D3D3D */ --la-text-muted: var(--la-neutral-500); --la-text-faint: var(--la-neutral-400); --la-text-on-dark: var(--la-neutral-300); --la-text-link: var(--la-brand-primary-700); --la-border: var(--la-neutral-200); --la-border-strong: var(--la-brand-secondary-300); /* ── Status (solid surface + readable content + soft tint) ── on-surface WCAG-chosen: dark on success/warning, white on error/info. */ --la-status-success-surface: var(--la-status-success-500); --la-status-success-on-surface: #171717; --la-status-success-soft: var(--la-status-success-100); --la-status-success-on-soft: var(--la-status-success-800); --la-status-warning-surface: var(--la-status-warning-500); --la-status-warning-on-surface: #171717; --la-status-warning-soft: var(--la-status-warning-100); --la-status-warning-on-soft: var(--la-status-warning-800); --la-status-error-surface: var(--la-status-error-500); --la-status-error-on-surface: #ffffff; --la-status-error-soft: var(--la-status-error-100); --la-status-error-on-soft: var(--la-status-error-800); --la-status-info-surface: var(--la-status-info-500); --la-status-info-on-surface: #ffffff; --la-status-info-soft: var(--la-status-info-100); --la-status-info-on-soft: var(--la-status-info-800); /* ── Shape — components consume these, not --la-radius-* ──── */ --la-container-corner: var(--la-radius-md); /* cards (20px) */ --la-container-small-corner: var(--la-radius-sm); /* small cards (12px) */ --la-control-corner: var(--la-radius-sm); /* inputs (12px) */ --la-pill-corner: var(--la-radius-full); /* pills / buttons */ /* ── Elevation (extension; navy-tinted, matches the app card override) ── */ --la-shadow-xs: 0 1px 2px rgba(0, 40, 87, 0.06); --la-shadow-sm: 0 2px 8px rgba(0, 40, 87, 0.06), 0 1px 2px rgba(0, 40, 87, 0.04); --la-shadow-md: 0 8px 24px rgba(0, 40, 87, 0.08), 0 2px 6px rgba(0, 40, 87, 0.05); --la-shadow-lg: 0 18px 48px rgba(0, 40, 87, 0.10), 0 4px 12px rgba(0, 40, 87, 0.06); --la-shadow-xl: 0 32px 72px rgba(0, 40, 87, 0.14), 0 8px 20px rgba(0, 40, 87, 0.08); --la-shadow-primary: 0 10px 28px rgba(242, 128, 32, 0.24); --la-shadow-tertiary: 0 10px 28px rgba(13, 138, 138, 0.20); --la-ring-card: inset 0 0 0 1px rgba(0, 40, 87, 0.06); /* @kind shadow */ --la-focus-ring: 0 0 0 4px rgba(242, 128, 32, 0.28); /* ── Motion (extension; gentle, no bounce) ───────────────── */ --la-ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --la-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --la-duration-fast: 120ms; /* @kind other */ --la-duration-base: 200ms; /* @kind other */ --la-duration-slow: 320ms; /* @kind other */ } /* ── Dark theme — STUB (neutral inversions only; tones untouched) ── */ .theme-dark { --la-surface: var(--la-neutral-950); --la-surface-raised: var(--la-neutral-900); --la-surface-sunken: var(--la-neutral-950); --la-surface-inverse: var(--la-neutral-0); --la-text-heading: var(--la-neutral-0); --la-text-body: var(--la-neutral-100); --la-text-muted: var(--la-neutral-400); --la-text-faint: var(--la-neutral-500); --la-border: var(--la-neutral-700); --la-brand-primary-surface: var(--la-brand-primary-400); --la-ring-card: inset 0 0 0 1px rgba(255, 255, 255, 0.06); /* @kind shadow */ }