/* tokens.css - single source of truth for every CSS custom property (design token).
   Loaded BEFORE styles.css (and any component stylesheet) so all components
   inherit these tokens and define zero :root blocks of their own.
   Light defaults live in :root; dark-theme overrides in html.dark; the one
   responsive geometry override lives in its media query at the bottom.
   Do NOT declare custom properties anywhere else - add them here. */

/* Heygents brand typography - self-hosted Geist (variable). See brand system v0.1:
   Geist for UI/marketing/body, Geist Mono selectively for technical labels. */
@font-face{
  font-family:"Geist";
  src:url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Geist Mono";
  src:url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

:root{
  color-scheme:light;
  --font-ui:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-title:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  /* Heygents brand primaries (v0.1): Ink, Mint, Soft Mint, Canvas, text-secondary. */
  --bg:#F4F5F6;
  --surface:#ffffff;
  --surface-2:#EEF0F2;
  --surface-soft:#ffffff;
  --bar-soft:#F4F5F6;
  --term-bg:#17191C;
  --line:#E4E7EA;
  --line-soft:rgba(228,231,234,.7);
  --line-2:#D3D7DC;
  --text:#17191C;
  --text-2:#4A4F55;
  /* Ink ramp. --text-3/--text-4 clear WCAG AA 4.5:1 on every light ground
     (#5C636B: 6.08 white / 5.32 surface-2 / 4.96 app-bg; #676D75: 5.22 white /
     4.57 surface-2). --text-5 is for hairlines/disabled glyphs only, never text. */
  --text-1:var(--text);           /* legacy alias */
  --muted:var(--text-3);          /* legacy alias */
  --text-3:#5C636B;
  --text-4:#676D75;
  --text-5:#B6BCC4;
  --link:#007C57;
  --accent:#35C99B;
  --accent-hover:#2FAE80;
  --soft-mint:#E4F8F1;
  /* Solid primary-button fill: deeper green so white labels clear WCAG AA.
     Measured: mint #35C99B under white 2.00:1 (fails); #007C57 under white
     5.22:1, hover #006647 7.02:1. Same in both themes (on dark surfaces the
     fill itself is 3.05:1 on #202225, a pass for a non-text boundary). */
  --btn-primary:#007C57;
  --btn-primary-hover:#006647;
  /* Green text on light grounds: 5.22 white / 4.78 bg / 4.57 surface-2. */
  --accent-fg:#007C57;
  --accent-strong-fg:#006647;
  /* Label ink on a solid --accent fill (white on mint fails). 8.16:1 on
     #35C99B, 8.86:1 on dark #4BD0A0, 7.75:1 on #38C492. Also clears the
     provider-pane accents (claude-orange 5.46, codex-chat 7.07, gemini-deep 6.77). */
  --on-accent:#0B1F17;
  /* Label on a provider-hue fill (--scan/--claude): white in light, ink in dark. */
  --on-provider:#ffffff;
  /* Keyboard focus ring (non-text, >=3:1): 3.07 on app-bg, 3.29 on surface-2. */
  --focus:#00966C;
  --accent-surface:rgba(53,201,155,.12);
  --accent-surface-2:rgba(53,201,155,.08);
  --accent-border:rgba(53,201,155,.4);
  --chip-bg:#EEF0F2;
  --slate-soft:rgba(138,144,153,.14);
  --slate-soft-2:rgba(138,144,153,.08);
  --shadow-color:rgba(24,25,27,.12);
  --dot-ring:rgba(24,25,27,.14);
  --scrim:rgba(24,25,27,.45);
  /* Semantic state. The base hue is for fills, dots, borders and tints; the
     -fg twin is for TEXT and clears 4.5:1 on white / bg / surface-2. */
  --err:#EF4E4C;
  --ok:#2FAE80;
  --warn:#E8912F;
  --err-fg:#CE2C31;               /* 5.21 / 4.77 / 4.56 */
  --ok-fg:#007C52;                /* 5.24 / 4.80 / 4.59 */
  --warn-fg:#A85700;              /* 5.21 / 4.78 / 4.56 */
  --danger:var(--err);
  --danger-fg:var(--err-fg);
  --danger-solid:#CE2C31;         /* solid destructive fill, white label 5.21 */
  --danger-solid-hover:#A62328;   /* white label 7.26 */
  --warn-surface:color-mix(in srgb,var(--warn) 10%,transparent);
  --warn-border:color-mix(in srgb,var(--warn) 40%,transparent);
  /* Provider identity & activity (DESIGN.md "Provider & Activity" family).
     One source of truth for the chat/dock/quota/history hues. Fill hues are
     constant across themes; the TEXT values (--claude, --scan, the -fg and
     -soft tokens) are light-safe here (>=4.5:1 on white/bg/surface-2) and
     switch back to the bright originals under html.dark. */
  --claude:#775AC3;               /* Claude violet: 5.20 white / 4.56 surface-2 */
  --codex:#22d3ee;                /* Codex quota-bar cyan (fill only) */
  --claude-orange:#d97745;        /* Claude agent identity (chat, fill) */
  --claude-orange-hover:#c86d3d;
  --claude-orange-fg:#AF511A;     /* 5.23 / 4.58 */
  --claude-orange-soft:#AF511A;   /* row/home logo tint */
  --codex-chat:#06b6d4;           /* Codex agent identity (chat, fill) */
  --codex-chat-hover:#0891b2;
  --codex-chat-fg:#007691;        /* 5.25 / 4.60 */
  --gemini:#34d399;               /* Gemini agent hue (fill/border) */
  --gemini-fg:#007D4B;            /* Gemini text: 5.20 / 4.56 */
  --gemini-deep:#10b981;          /* Gemini agent solid */
  --gemini-deep-hover:#059669;
  --run:#22c55e;
  --run-fg:#007E27;               /* 5.23 / 4.58 */
  --done:#3b82f6;
  --done-fg:#306AC8;              /* 5.22 / 4.57 */
  /* App-wide conversation state palette (base = dots/fills, -fg = text). */
  --chat-working:#f59e0b;
  --chat-waiting:var(--done);
  --chat-done:var(--run);
  --chat-error:#ef4444;
  --chat-working-fg:#A85700;
  --chat-waiting-fg:var(--done-fg);
  --chat-done-fg:var(--run-fg);
  --chat-error-fg:#CE2C31;
  --live:#14b8a6;
  --live-fg:#007A6E;              /* 5.24 / 4.59 */
  --scan:#0073A9;                 /* scan sky as text/fill: 5.22 / 4.57, white label 5.22 */
  /* Chat pane base defaults - overridden per provider below. Without these the
     unthemed pane fell back to stale indigo; brand green is the correct base. */
  --chat-user-bg:color-mix(in srgb,var(--accent) 16%,transparent);
  --chat-accent-hover:color-mix(in srgb,var(--accent) 34%,transparent);
  /* Prodify shell */
  --app-bg:#E6E8EC;
  --nav-bg:#ffffff;
  --card:#ffffff;
  --card-line:#E4E7EA;
  --card-shadow:0 4px 16px rgba(24,25,27,.05);
  --card-shadow-hover:0 8px 22px rgba(24,25,27,.10);
  --card-2:#F9FAFB;
  --code-bg:var(--surface-2);
  --panel-shadow:0 12px 40px rgba(24,25,27,.08);
  --popover-shadow:0 8px 24px rgba(23,25,28,.12);
  --accent-grad:#35C99B;
  /* Unified control geometry - shared by action buttons, tabs, tags/badges.
     Heygents brand: restrained rounded corners, radius 8-12px. No giant SaaS
     cards; --radius-xl/--radius-shell are capped to the 12-16px brand ceiling. */
  --radius-control:8px;
  --radius-pill:999px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:16px;
  --radius-shell:16px;
  --pad-control:9px 17px;
  --pad-control-sm:6px 13px;
  --mono:var(--font-mono);        /* legacy alias */
  /* Layering scale. Local stacking inside a component keeps small literals
     (1-10); anything that escapes its parent uses one of these. */
  --z-dropdown:100;               /* menus, popovers, pickers */
  --z-sticky:200;                 /* reserved: sticky chrome that must beat popovers */
  --z-backdrop:300;               /* modal scrims / overlays */
  --z-modal:310;                  /* dialog content above its scrim */
  --z-toast:400;
  --z-tooltip:500;
  /* Brand green - fixed brand identity hue (Heygents Mint), constant across themes. */
  --brand-green:#35C99B;
  --brand-green-dark:#007C57;
}
html.dark{
  color-scheme:dark;
  --bg:#17191C;
  --surface:#202225;
  --surface-2:#26282B;
  --surface-soft:rgba(32,34,37,.6);
  --bar-soft:rgba(23,25,28,.6);
  --term-bg:#0f1012;
  --soft-mint:rgba(53,201,155,.14);
  --line:#2C2F34;
  --line-soft:rgba(44,47,52,.7);
  --line-2:#3A3D42;
  --text:#F5F6F7;
  --text-2:#D3D7DC;
  --text-3:#B6BCC4;
  --text-4:#8A9099;
  --text-5:#899097;               /* 5.45 bg / 4.94 surface / 4.57 surface-2 */
  --link:#6FDCB0;
  --accent:#4BD0A0;
  --accent-hover:#38C492;
  --accent-fg:#6FDCB0;
  --accent-strong-fg:#A6EACE;
  --accent-surface:rgba(75,208,160,.16);
  --accent-surface-2:rgba(75,208,160,.1);
  --accent-border:rgba(75,208,160,.4);
  --chip-bg:#26282B;
  --slate-soft:rgba(182,188,196,.14);
  --slate-soft-2:rgba(182,188,196,.08);
  --shadow-color:rgba(0,0,0,.5);
  --dot-ring:rgba(255,255,255,.12);
  --scrim:rgba(0,0,0,.6);
  --err:#FD6765;
  --ok:#4BD0A0;
  --warn:#F6B24B;
  --err-fg:#FD6765;
  --ok-fg:#4BD0A0;
  --warn-fg:#F6B24B;
  --on-provider:#0F1012;          /* 8.89 on #38bdf8, 6.99 on #a78bfa */
  --focus:#4BD0A0;
  /* Provider/activity text values that pass on the dark grounds. */
  --claude:#a78bfa;
  --scan:#38bdf8;
  --claude-orange-fg:#f0a46f;
  --claude-orange-soft:#e8926a;
  --codex-chat-fg:#67e8f9;
  --gemini-fg:#34d399;
  --run-fg:#1FB257;               /* 6.34 / 5.74 / 5.32 */
  --done-fg:#448CFF;              /* 5.40 / 4.89 / 4.53 */
  --live-fg:#249F93;              /* 5.41 / 4.90 / 4.54 */
  --chat-working-fg:#f59e0b;
  --chat-error-fg:#FC514F;        /* 5.39 / 4.88 / 4.52 */
  --card-shadow-hover:0 8px 22px rgba(0,0,0,.45);
  --card-2:rgba(255,255,255,.02);
  --app-bg:#0E0F11;
  --nav-bg:#202225;
  --card:#202225;
  --card-line:#2C2F34;
  --card-shadow:0 4px 16px rgba(0,0,0,.35);
  --panel-shadow:0 12px 40px rgba(0,0,0,.45);
  --popover-shadow:0 8px 24px rgba(0,0,0,.5);
  --accent-grad:#4BD0A0;
}

/* Responsive geometry override - tighten shared control padding on phones. */
@media (max-width:560px){
  :root{--pad-control:9px 15px;--pad-control-sm:7px 12px;}
}