/* --- /styles/hea_tokens.css — single source of truth --- */ /* ========= 1) Brand ========= */ :root{ --brand1:#ff5f6d; --brand2:#ffc371; --brand-accent:#2c3e50; /* was brand-color-accent */ --brand-orange:#ff7a00; /* legacy kept */ /* ========= 2) Core surfaces & text (LIGHT) ========= */ --bg:#fafafa; --surface:#ffffff; --surface-2:#f1f5f9; /* unified lighter second surface */ --card:var(--surface); --ink:#0b1022; /* darker than #151515, good legibility */ --muted:#6b7280; /* tailwind slate-500-ish */ --line:#e2e8f0; /* tailwind slate-200-ish */ /* ========= 3) States & feedback ========= */ --ok:#16a34a; --warn:#c27d0e; --fail:#e03131; --destructive:#d7263d; /* legacy kept */ /* ========= 4) Interactions ========= */ --link:#2f6fed; --ring: rgba(255,95,109,.35); /* ========= 5) Chat defaults (LIGHT) ========= */ --chat-bg:#ffffff; --user-text: var(--ink); --user-bubble:#eaf5ff; --agent-text: var(--ink); --agent-bubble:#ffffff; /* ========= 6) Terminal palette ========= */ --terminal-bg:#0b0f14; --terminal-fg:#c7f9cc; --terminal-warn:#ffd46b; --terminal-err:#ff8a8a; /* ========= 7) Elevation & radius ========= */ --shadow-xs:0 1px 2px rgba(0,0,0,.04); --shadow-sm:0 1px 2px rgba(0,0,0,.06); --shadow-md:0 6px 14px rgba(0,0,0,.10); --shadow-lg:0 6px 28px rgba(0,0,0,.06); --radius-md:10px; --radius-lg:14px; } /* ====== System dark preference ====== */ @media (prefers-color-scheme: dark){ :root{ --bg:#0f1115; --surface:#171a20; --surface-2:#13161c; --card:#0f141b; --ink:#e6ebf5; --muted:#93a0b3; --line:#2a2f3a; --chat-bg:#0f1115; --user-text: #eaf0ff; --user-bubble:#0f2230; --agent-text: #eaf0ff; --agent-bubble:#171a20; --ring: rgba(255,195,113,.35); --terminal-bg:#0c1016; --terminal-fg:#b4f5bc; --shadow-xs:0 1px 2px rgba(0,0,0,.25); --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow-md:0 6px 14px rgba(0,0,0,.45); --shadow-lg:0 6px 28px rgba(0,0,0,.45); } } /* ====== Explicit overrides via (optional) ====== */ :root.light{ --bg:#fafafa; --surface:#fff; --surface-2:#f1f5f9; --card:#fff; --ink:#0f172a; --muted:#6b7280; --line:#e2e8f0; --ring:rgba(255,95,109,.35); --chat-bg:#ffffff; --user-bubble:#eaf5ff; --agent-bubble:#ffffff; } :root.dark{ --bg:#0f1115; --surface:#171a20; --surface-2:#13161c; --card:#0f141b; --ink:#e6ebf5; --muted:#93a0b3; --line:#2a2f3a; --ring:rgba(255,195,113,.35); --chat-bg:#0f1115; --user-bubble:#0f2230; --agent-bubble:#171a20; --shadow-xs:0 1px 2px rgba(0,0,0,.25); --shadow-sm:0 1px 2px rgba(0,0,0,.35); --shadow-md:0 6px 18px rgba(0,0,0,.35); --shadow-lg:0 6px 28px rgba(0,0,0,.45); } /* Let the UA theme native controls properly */ html{ color-scheme: light dark; } /* ====== 8) Back-compat aliases (DEPRECATE these names over time) ====== */ :root{ /* multiple spellings mapped to the canonical tokens above */ --brand-color-primary: var(--brand1); --brand-color-secondary: var(--brand2); /* various shadows present in older files map to our set */ /* (no-op if not used) */ }