/** * @sandy-vans/arda-design — design tokens * * Light palette lives on :root. Dark overrides live under [data-theme="dark"] * (no toggle wired yet — plan §11.9 resolved 2026-09-01: ship both palettes now). * No component in either app may read a raw hex value — only these tokens. * * Palette provenance: every color value below mirrors Arda's own shipped * frontend design system 1:1 — `arda/scratch/arda-frontend-app-work/src/app/globals.css` * (`--base-primary #FC5A29`, `--base-foreground #0A0A0A`, `--base-border #E5E5E5`, * `--base-background #FFFFFF`, `--base-destructive #DC2626`), verified 2026-09-03. * This was already true as of the 2026-09-02 slice-2 commit — there was never a * separate "Sandy Vans rust" palette to migrate off of. */ :root { /* Brand / action */ --primary: #FC5A29; --primary-hover: #E04D22; /* White text on --primary computes to 3.17:1 — fails the 4.5:1 AA text floor (it clears only the 3:1 large-text/UI-component floor). Kept anyway: this is Arda's own actual production choice (its own `--base-primary-foreground` is #FAFAFA, effectively white, on this identical orange) — a named, deliberate brand-fidelity exception, the same class of trade-off as QuickActionButton's 36px touch target below. Do not "fix" by darkening the text; that would visually diverge from real Arda buttons, which is the opposite of the ask. */ --primary-foreground: #FFFFFF; --focus-ring: #3B82F6; --link: #0A68F3; /* Base */ --background: #FFFFFF; --foreground: #0A0A0A; --muted-foreground: #737373; --border: #E5E5E5; --destructive: #DC2626; /* Sidebar shell */ --sidebar-background: #0A0A0A; --sidebar-active-bar: var(--primary); /* Status trio: success */ --success-bg: #DCFCE7; --success-fg: #166534; --success-border: #BBF7D0; /* Status trio: warning */ --warning-bg: #FEF3C7; --warning-fg: #92400E; --warning-border: #FDE68A; /* Status trio: info */ --info-bg: #DBEAFE; --info-fg: #1E40AF; --info-border: #BFDBFE; /* Status trio: destructive */ --destructive-bg: #FEE2E2; --destructive-fg: #991B1B; --destructive-border: #FECACA; /* Type — `--font-geist-sans`/`--font-geist-mono` are set by the `geist` npm package's `GeistSans.variable`/`GeistMono.variable` classNames, applied to each app's in its root layout (self-hosted via next/font/local, so the strict `font-src 'self'` CSP both apps ship holds — no Google Fonts request, no silent system-font fallback). The fallback inside var() only fires for a hypothetical consumer of this stylesheet that never wired the package — an unset custom property with no fallback invalidates the whole font-family declaration. */ --font-sans: var(--font-geist-sans, 'Geist'), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: var(--font-geist-mono, 'Geist Mono'), ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Weights — Geist 400/500/600/700 for UI text, per shared/README.md */ --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Type scale — text-sm (14px) is the desktop floor for user-facing text, stepping up to text-base (16px) on mobile, per shared/README.md. */ --text-sm: 0.875rem; --text-base: 1rem; } [data-theme="dark"] { /* Base — inverted foreground/background/border pairs */ --background: #0A0A0A; --foreground: #FAFAFA; --muted-foreground: #A3A3A3; --border: #262626; /* Brand, action, and status trios held constant for brand consistency */ --primary: #FC5A29; --primary-hover: #E04D22; /* Held constant with light — same 3.17:1 exception documented above. */ --primary-foreground: #FFFFFF; --focus-ring: #3B82F6; /* Lightened from the light-palette #0A68F3 (4.04:1 against #0A0A0A — below the 4.5:1 AA floor) to #5EA3FF — computed 7.69:1 against #0A0A0A, clearing the WCAG AA 4.5:1 floor for body text with margin. A deliberate exception to "primary and status trios held constant" (shared/README.md) — link text is body content, not a brand chrome color, so it must pass contrast on its own background rather than carry the light value over. */ --link: #5EA3FF; --destructive: #DC2626; --sidebar-background: #0A0A0A; --sidebar-active-bar: var(--primary); --success-bg: #DCFCE7; --success-fg: #166534; --success-border: #BBF7D0; --warning-bg: #FEF3C7; --warning-fg: #92400E; --warning-border: #FDE68A; --info-bg: #DBEAFE; --info-fg: #1E40AF; --info-border: #BFDBFE; --destructive-bg: #FEE2E2; --destructive-fg: #991B1B; --destructive-border: #FECACA; }