/* ───────────────────────────────────────────────────────────────────────────── Hoard design tokens — the single source of truth (ahg-ry4yf). DESIGN.md is the spec; this file is the code. Every layout loads this before any other stylesheet. Do not re-declare these names or invent parallel ones. Sections: 1. Canonical tokens (dark — the default) 2. Legacy aliases (do NOT add consumers; migrate off under ahg-6djxk) 3. Light mode — app toggle ([data-theme="light"]) 4. Light mode — OS-follow surfaces (html.theme-auto: marketing/public pages) Sections 3 and 4 carry the same canonical values; keep them in lockstep. ──────────────────────────────────────────────────────────────────────────── */ :root { /* Surfaces — steps on the warm-stone ramp. Flat physics: separation is fill + space; no borders or shadows on in-flow surfaces. */ --bg-primary: #0c0a09; --bg-secondary: #1c1917; --bg-tertiary: #292524; --bg-active: #3c3532; --bg-card: rgba(255, 255, 255, 0.025); --bg-card-hover: rgba(255, 255, 255, 0.04); --bg-glass: rgba(255, 255, 255, 0.03); --zebra: rgba(255, 255, 255, 0.02); --hover-bg: rgba(255, 255, 255, 0.05); /* Found edges only: inputs, selects, dropdown menus, real buttons on a same-color surface. Never card/panel chrome. */ --border: #44403c; --border-subtle: rgba(255, 255, 255, 0.06); --border-accent: rgba(245, 158, 11, 0.3); /* Text ramp */ --text-primary: #fafaf9; --text-body: #d6d3d1; --text-secondary: #c8c3be; --text-muted: #78716c; --text-faint: #57534e; /* The accent + semantics. Amber does all the pointing. */ --accent-amber: #f59e0b; --accent-amber-hover: #d97706; --accent-green: #4ade80; --accent-rose: #f87171; --accent-orange: #fb923c; --accent-blue: #60a5fa; --amber-tint: rgba(245, 158, 11, 0.12); --amber-tint-border: rgba(245, 158, 11, 0.28); --green-tint: rgba(74, 222, 128, 0.12); --rose-tint: rgba(248, 113, 113, 0.12); /* Type — three fonts, four tiers, two trackings. 13px is the floor and belongs exclusively to uppercase tracked labels. */ --font-display: 'Cabinet Grotesk', 'Geist', sans-serif; --font-sans: 'Geist', sans-serif; --font-mono: 'Geist Mono', monospace; --fs-body: 15px; --fs-meta: 14px; --fs-label: 13px; --fs-input: 16px; --tracking-label: 0.08em; --tracking-display: -0.02em; /* Radius — hierarchical */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px; --radius-xl: 14px; --radius-full: 999px; /* Motion — DESIGN.md's mode-toggle duration. */ --motion-long: 350ms; --motion-state-easing: ease-in-out; /* Elevation — transient layers ONLY (dropdowns, modals, popovers, toasts, overlays). In-flow surfaces are flat. */ --shadow-overlay: 0 8px 24px rgba(0, 0, 0, 0.45); /* Hoard glyph as a mask source (.toolbar-btn--agent, .empty-state-mark) */ --hoard-mark-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M220.6 304.6L220.6 411.7L145 411.7L145 130.3L220.6 130.3L220.6 237.4L321.4 237.4L321.4 130.3L397 130.3L397 411.7L321.4 411.7L321.4 304.6L220.6 304.6Z'/%3E%3C/svg%3E"); } /* ── 2. Legacy aliases ────────────────────────────────────────────────────── The old per-surface namespaces (marketing short names, card-detail handoff names). Kept so nothing re-renders; every one is a migration target. Do not write new code against these. */ :root { --bg: var(--bg-primary); --s1: var(--bg-secondary); --s2: var(--bg-tertiary); --s3: var(--bg-active); --t0: var(--text-primary); --t1: var(--text-body); --t2: #a8a29e; /* no canonical step; migrate to --text-secondary or --text-muted */ --t3: var(--text-muted); --t4: var(--text-faint); --bsub: var(--border-subtle); --amber: var(--accent-amber); --amber-h: var(--accent-amber-hover); --amber-d: var(--amber-tint); --amber-b: var(--amber-tint-border); --green: var(--accent-green); --green-d: var(--green-tint); --red: var(--accent-rose); --red-d: var(--rose-tint); --pos: var(--accent-green); --focus: var(--accent-amber); --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-xl); --r-full: var(--radius-full); /* Marketing atmosphere shared by landing/features/auth (sanctioned landing exceptions in DESIGN.md). Surface-specific atmosphere (--dot-grid, --inset-*, --atmo-opacity, --card-shadow) stays in its layout. */ --body-grad: linear-gradient(to bottom, #222120 0%, #1c1917 30%, #121010 100%); --header-bg: rgba(12, 10, 9, 0.94); --shadow-heavy: rgba(0, 0, 0, 0.55); --shadow-mid: rgba(0, 0, 0, 0.3); --noise-opacity: 0.035; } /* ── Theme transition ──────────────────────────────────────────────────────── Fade on toggle only — scoped to .theme-transitioning, not a bare `*`, so it never overrides a component's own hover/focus transition. No box-shadow. */ @media (prefers-reduced-motion: no-preference) { :is(.theme-transitioning, .theme-transitioning *, .theme-transitioning *::before, .theme-transitioning *::after) { transition: background-color var(--motion-long) var(--motion-state-easing), color var(--motion-long) var(--motion-state-easing), border-color var(--motion-long) var(--motion-state-easing); } } /* ── Button normalize ─────────────────────────────────────────────────────── Buttons never wear UA chrome (grey bevel border, grey face, system font). Every layout loads this file, so a