/* --- /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; --card:var(--surface); --ink:#0b1022; --muted:#6b7280; --line:#e2e8f0; /* ✅ Neutral borders (use for 1px borders everywhere) */ --border: var(--line); /* ========= 3) States & feedback ========= */ --ok:#16a34a; --warn:#c27d0e; --fail:#e03131; --destructive:#d7263d; /* ========= 4) Interactions ========= */ --link:#2f6fed; /* ✅ Focus / glow only (don’t use as border color) */ --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; /* Code tokens */ --code-bg: color-mix(in srgb, var(--card) 92%, var(--bg) 8%); --code-border: color-mix(in srgb, var(--border) 70%, var(--ring) 30%); } /* ====== System dark preference ====== */ @media (prefers-color-scheme: dark){ :root{ --bg:#0f1115; --surface:#171a20; --surface-2:#13161c; --card:#0f141b; --ink:#e6ebf5; --muted:#93a0b3; --line:#2a2f3a; /* ✅ borders stay neutral */ --border: var(--line); --chat-bg:#0f1115; --user-text: #eaf0ff; --user-bubble:#171a20; --agent-text: #eaf0ff; --agent-bubble:#171a20; /* ✅ focus ring in dark = warm/orange */ --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); /* Recompute code border for dark */ --code-bg: color-mix(in srgb, var(--card) 92%, var(--bg) 8%); --code-border: color-mix(in srgb, var(--border) 70%, var(--ring) 30%); } } /* ====== Explicit overrides via (optional) ====== */ :root.light{ --bg:#fafafa; --surface:#fff; --surface-2:#f1f5f9; --card:#fff; --ink:#0f172a; --muted:#6b7280; --line:#e2e8f0; --border: var(--line); --ring:rgba(255,95,109,.35); --chat-bg:#ffffff; --user-bubble:#eaf5ff; --agent-bubble:#ffffff; --code-bg: color-mix(in srgb, var(--card) 92%, var(--bg) 8%); --code-border: color-mix(in srgb, var(--border) 70%, var(--ring) 30%); } :root.dark{ --bg:#0f1115; --surface:#171a20; --surface-2:#13161c; --card:#0f141b; --ink:#e6ebf5; --muted:#93a0b3; --line:#2a2f3a; --border: var(--line); --ring:rgba(255,195,113,.35); --chat-bg:#0f1115; --user-bubble:#171a20; --agent-bubble:#1c2028; --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); --code-bg: color-mix(in srgb, var(--card) 92%, var(--bg) 8%); --code-border: color-mix(in srgb, var(--border) 70%, var(--ring) 30%); } /* Let the UA theme native controls properly */ html{ color-scheme: light dark; } /* ====== Back-compat aliases (deprecate over time) ====== */ :root{ --brand-color-primary: var(--brand1); --brand-color-secondary: var(--brand2); }