/* ClearCast design tokens — combined for the app. Typography uses local
   system fallbacks so opening caption content never contacts a font provider. */

:root {
  --indigo-50:#F2F3FB; --indigo-100:#E3E6F6; --indigo-200:#C4CAEC; --indigo-300:#9BA5DF;
  --indigo-400:#6E7BCE; --indigo-500:#4D5BBF; --indigo-600:#3A47A3; --indigo-700:#2E3A85;
  --indigo-800:#232C66; --indigo-900:#1A2150;
  --teal-50:#E5F5F2; --teal-100:#C8ECE6; --teal-300:#79D2C7; --teal-500:#19A698;
  --teal-600:#128A7F; --teal-700:#0E6E66; --teal-800:#0A554F;
  --stone-50:#FAF8F5; --stone-100:#F3F0EA; --stone-200:#E7E2D9; --stone-300:#D6CFC3;
  --stone-400:#B6AE9F; --stone-500:#8C8579; --stone-600:#6B655B; --stone-700:#514C44;
  --stone-800:#353129; --stone-900:#211E19;
  --ink-900:#1C1B18; --ink-700:#3E3A33; --ink-500:#6B655B; --ink-300:#9A9488; --ink-000:#FFFFFF;
  --green-100:#D7EFE2; --green-500:#1E8A5A; --green-700:#14633F;
  --amber-100:#FBEBCB; --amber-500:#C9820A; --amber-700:#8F5C05;
  --red-100:#F7DEDB; --red-500:#C53030; --red-700:#8F1F1F; --rec-500:#D6342C;

  --color-primary:var(--indigo-600); --color-primary-hover:var(--indigo-700);
  --color-primary-active:var(--indigo-800); --color-on-primary:#FFFFFF;
  --color-accent:var(--teal-600); --color-accent-hover:var(--teal-700); --color-on-accent:#FFFFFF;
  --color-link:var(--teal-700);
  --bg-app:var(--stone-50); --surface-1:#FFFFFF; --surface-2:var(--stone-100);
  --surface-raised:#FFFFFF; --surface-inverse:var(--stone-900); --overlay-scrim:rgba(28,27,24,0.55);
  --text-primary:var(--ink-900); --text-secondary:var(--ink-700); --text-muted:var(--ink-500);
  --text-on-dark:#FFFFFF; --text-on-primary:#FFFFFF;
  --border-subtle:var(--stone-200); --border-default:var(--stone-300); --border-strong:var(--stone-500);
  --color-success:var(--green-500); --color-success-bg:var(--green-100);
  --color-warning:var(--amber-500); --color-warning-bg:var(--amber-100);
  --color-error:var(--red-500); --color-error-bg:var(--red-100);
  --state-listening:var(--teal-600); --state-recording:var(--rec-500); --state-connected:var(--green-500);
  --state-offline:var(--stone-500); --state-reconnecting:var(--amber-500);
  --caption-bg:#FFFFFF; --caption-text:var(--ink-900); --caption-speaker:var(--indigo-700);
  --caption-low-confidence:var(--ink-500);
  --focus-ring:var(--indigo-500); --focus-ring-offset:#FFFFFF;
  --disabled-bg:var(--stone-200); --disabled-text:var(--ink-300); --disabled-border:var(--stone-300);

  /* Brand/accent TINT SURFACES. These exist because the raw palette ramps
     (--indigo-50, --teal-50 …) are literal light colours defined once and
     never remapped per theme — pairing one with --text-primary produces
     invisible light-on-light text in every dark theme. Anything that needs a
     selected/branded background must use these, never a raw ramp value. */
  --color-primary-bg:var(--indigo-50); --color-primary-bg-text:var(--indigo-700);
  --color-accent-bg:var(--teal-50); --color-accent-bg-text:var(--teal-700);

  /* SOLID brand fills (filled buttons, chips, icon tiles) as distinct from
     --color-primary, which also has to work as TEXT on the page background.
     Dark themes pull --color-primary light so it stays legible as text, which
     makes it a poor fill: a pale indigo button needs near-black text and ends
     up reading as disabled. These two keep filled controls saturated with
     white text while --color-primary stays light for text and icons. */
  --color-primary-solid:var(--color-primary); --color-on-primary-solid:var(--color-on-primary);

  --font-caption:"Atkinson Hyperlegible","Public Sans",system-ui,sans-serif;
  --font-display:"Atkinson Hyperlegible","Public Sans",system-ui,sans-serif;
  --font-ui:"Public Sans",system-ui,-apple-system,sans-serif;
  --font-body:"Public Sans",system-ui,-apple-system,sans-serif;
  --font-reading:"Lexend","Public Sans",system-ui,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extra:800;

  --caption-sm:28px; --caption-md:40px; --caption-lg:56px; --caption-xl:80px; --caption-xxl:112px;
  --caption-proj:clamp(64px,11vw,220px);
  --caption-line-height:1.28; --caption-tracking:0.01em; --caption-weight:var(--fw-bold);
  --caption-max-line:32ch; --caption-max-line-proj:24ch;
  --display-lg:44px; --display-lg-lh:1.1; --display-md:34px; --display-md-lh:1.15;
  --display-sm:28px; --display-sm-lh:1.2;
  --mkt-hero:clamp(40px,6vw,76px); --mkt-hero-lh:1.05; --mkt-hero-tracking:-0.02em;
  --mkt-h1:clamp(32px,4vw,52px); --mkt-h1-lh:1.1; --mkt-h1-tracking:-0.015em;
  --mkt-h2:clamp(26px,3vw,38px); --mkt-h2-lh:1.15; --mkt-h2-tracking:-0.01em;
  --mkt-h3:24px; --mkt-h3-lh:1.25; --mkt-lead:clamp(18px,2vw,22px); --mkt-lead-lh:1.5;
  --text-xs:13px; --text-xs-lh:1.4; --text-sm:15px; --text-sm-lh:1.45; --text-md:17px; --text-md-lh:1.5;
  --text-lg:19px; --text-lg-lh:1.5; --text-xl:22px; --text-xl-lh:1.4;
  --ui-label:15px; --ui-label-tracking:0.01em; --ui-button:17px; --ui-button-tracking:0.005em;
  --tracking-tight:-0.015em; --tracking-normal:0; --tracking-wide:0.04em;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-7:32px; --space-8:40px; --space-9:48px; --space-10:64px; --space-11:80px; --space-12:96px;
  --container-sm:640px; --container-md:840px; --container-lg:1080px;
  --gutter:24px; --gutter-lg:48px; --grid-gap:24px;
  --tap-target-min:44px; --tap-target-comfortable:56px; --tap-spacing-min:8px;
  --icon-min:20px; --icon-touch:24px; --focus-width:3px; --focus-offset:2px;
  --control-sm:40px; --control-md:48px; --control-lg:56px; --control-xl:72px;

  --radius-xs:6px; --radius-sm:10px; --radius-md:14px; --radius-lg:20px; --radius-xl:28px;
  --radius-2xl:36px; --radius-pill:999px;
  --border-width:1px; --border-width-strong:2px; --border-width-hc:2px;
  --shadow-xs:0 1px 2px rgba(33,30,25,0.06);
  --shadow-sm:0 1px 3px rgba(33,30,25,0.08),0 1px 2px rgba(33,30,25,0.06);
  --shadow-md:0 4px 12px rgba(33,30,25,0.08),0 2px 4px rgba(33,30,25,0.05);
  --shadow-lg:0 12px 28px rgba(33,30,25,0.12),0 4px 8px rgba(33,30,25,0.06);
  --shadow-xl:0 24px 56px rgba(33,30,25,0.16),0 8px 16px rgba(33,30,25,0.08);
  --shadow-focus:0 0 0 var(--focus-offset) var(--focus-ring-offset),0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--focus-ring);
  --ease-standard:cubic-bezier(0.2,0,0,1); --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in:cubic-bezier(0.4,0,1,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --dur-pulse:1600ms;
  --z-base:0; --z-sticky:100; --z-nav:200; --z-overlay:800; --z-modal:900; --z-toast:1000; --z-projection:1100;
}

[data-reading-font="lexend"] {
  --font-caption:"Lexend","Atkinson Hyperlegible",system-ui,sans-serif;
  --font-body:"Lexend","Public Sans",system-ui,sans-serif;
  --font-ui:"Lexend","Public Sans",system-ui,sans-serif;
}

[data-theme="dark"] {
  --color-primary:var(--indigo-400); --color-primary-hover:var(--indigo-300); --color-primary-active:var(--indigo-200);
  --color-on-primary:var(--indigo-900); --color-accent:var(--teal-300); --color-accent-hover:var(--teal-100);
  --color-on-accent:var(--teal-800); --color-link:var(--teal-300);
  --bg-app:var(--stone-900); --surface-1:var(--stone-800); --surface-2:#2B2822; --surface-raised:#3A352C;
  --surface-inverse:var(--stone-50); --overlay-scrim:rgba(0,0,0,0.66);
  --text-primary:#F7F4EF; --text-secondary:#D8D2C7; --text-muted:#A59E91; --text-on-primary:var(--indigo-900);
  --border-subtle:#3A352C; --border-default:#4A443A; --border-strong:#6B655B;
  --color-success:#46C088; --color-success-bg:#143A2A; --color-warning:#E6A93C; --color-warning-bg:#3D2E12;
  --color-error:#E8746C; --color-error-bg:#3E1B1A;
  --state-listening:var(--teal-300); --state-recording:#F0584F; --state-connected:#46C088;
  --state-offline:var(--stone-500); --state-reconnecting:#E6A93C;
  --caption-bg:var(--stone-900); --caption-text:#F7F4EF; --caption-speaker:var(--teal-300); --caption-low-confidence:#A59E91;
  --focus-ring:var(--indigo-300); --focus-ring-offset:var(--stone-900);
  --disabled-bg:#2B2822; --disabled-text:#6B655B; --disabled-border:#4A443A;
  --color-primary-bg:#262D4F; --color-primary-bg-text:#C4CAEC;
  --color-accent-bg:#0E2E2A; --color-accent-bg-text:#C8ECE6;
  /* Saturated enough to carry white text (5.9:1) while --color-primary above
     stays light for text use. */
  --color-primary-solid:var(--indigo-500); --color-on-primary-solid:#FFFFFF;
}

[data-theme="hc-light"] {
  --color-primary:#1A2150; --color-primary-hover:#0E1338; --color-primary-active:#000000; --color-on-primary:#FFFFFF;
  --color-accent:#0A554F; --color-accent-hover:#073C38; --color-on-accent:#FFFFFF; --color-link:#0A554F;
  --bg-app:#FFFFFF; --surface-1:#FFFFFF; --surface-2:#F2F2F2; --surface-raised:#FFFFFF; --surface-inverse:#000000;
  --overlay-scrim:rgba(0,0,0,0.7);
  --text-primary:#000000; --text-secondary:#1A1A1A; --text-muted:#333333; --text-on-primary:#FFFFFF;
  --border-subtle:#000000; --border-default:#000000; --border-strong:#000000;
  --color-success:#0B6B3A; --color-success-bg:#D7EFE2; --color-warning:#7A4E00; --color-warning-bg:#FBEBCB;
  --color-error:#A30000; --color-error-bg:#F7DEDB;
  --state-listening:#0A554F; --state-recording:#A30000; --state-connected:#0B6B3A; --state-offline:#333333; --state-reconnecting:#7A4E00;
  --caption-bg:#FFFFFF; --caption-text:#000000; --caption-speaker:#1A2150; --caption-low-confidence:#333333;
  --focus-ring:#000000; --focus-ring-offset:#FFFFFF; --disabled-bg:#E0E0E0; --disabled-text:#595959; --disabled-border:#000000;
  --color-primary-bg:#E8E9F5; --color-primary-bg-text:#000000;
  --color-accent-bg:#DFF0ED; --color-accent-bg-text:#000000;
}

[data-theme="hc-dark"] {
  --color-primary:#C4CAEC; --color-primary-hover:#E3E6F6; --color-primary-active:#FFFFFF; --color-on-primary:#000000;
  --color-accent:#79D2C7; --color-accent-hover:#C8ECE6; --color-on-accent:#000000; --color-link:#79D2C7;
  --bg-app:#000000; --surface-1:#000000; --surface-2:#121212; --surface-raised:#0A0A0A; --surface-inverse:#FFFFFF;
  --overlay-scrim:rgba(0,0,0,0.8);
  --text-primary:#FFFFFF; --text-secondary:#F0F0F0; --text-muted:#D6D6D6; --text-on-primary:#000000;
  --border-subtle:#FFFFFF; --border-default:#FFFFFF; --border-strong:#FFFFFF;
  --color-success:#5BE39B; --color-success-bg:#0A2A1B; --color-warning:#FFC152; --color-warning-bg:#2E2206;
  --color-error:#FF7A72; --color-error-bg:#2E0F0D;
  --state-listening:#79D2C7; --state-recording:#FF6259; --state-connected:#5BE39B; --state-offline:#D6D6D6; --state-reconnecting:#FFC152;
  --caption-bg:#000000; --caption-text:#FFFFFF; --caption-speaker:#79D2C7; --caption-low-confidence:#D6D6D6;
  --focus-ring:#FFFFFF; --focus-ring-offset:#000000; --disabled-bg:#1A1A1A; --disabled-text:#8A8A8A; --disabled-border:#FFFFFF;
  --color-primary-bg:#10142E; --color-primary-bg-text:#FFFFFF;
  --color-accent-bg:#04211E; --color-accent-bg-text:#FFFFFF;
}

[data-theme="yellow-black"] {
  --color-primary:#FFD43B; --color-primary-hover:#FFE066; --color-primary-active:#FFEC99; --color-on-primary:#000000;
  --color-accent:#FFD43B; --color-accent-hover:#FFE066; --color-on-accent:#000000; --color-link:#FFE066;
  --bg-app:#000000; --surface-1:#000000; --surface-2:#0D0D0D; --surface-raised:#0D0D0D; --surface-inverse:#FFD43B;
  --overlay-scrim:rgba(0,0,0,0.85);
  --text-primary:#FFD43B; --text-secondary:#FFE066; --text-muted:#C9A92E; --text-on-dark:#FFD43B; --text-on-primary:#000000;
  --border-subtle:#FFD43B; --border-default:#FFD43B; --border-strong:#FFD43B;
  --color-success:#7CFF6B; --color-success-bg:#0A2A06; --color-warning:#FFD43B; --color-warning-bg:#2E2406;
  --color-error:#FF6B6B; --color-error-bg:#2E0606;
  --state-listening:#FFD43B; --state-recording:#FF6B6B; --state-connected:#7CFF6B; --state-offline:#C9A92E; --state-reconnecting:#FFE066;
  --caption-bg:#000000; --caption-text:#FFD43B; --caption-speaker:#FFE066; --caption-low-confidence:#C9A92E;
  --focus-ring:#FFD43B; --focus-ring-offset:#000000; --disabled-bg:#1A1A1A; --disabled-text:#7A671C; --disabled-border:#7A671C;
  --color-primary-bg:#1F1800; --color-primary-bg-text:#FFD43B;
  --color-accent-bg:#1F1800; --color-accent-bg-text:#FFD43B;
}

[data-theme="projection"] {
  --color-primary:#FFFFFF; --color-primary-hover:#E3E6F6; --color-primary-active:#C4CAEC; --color-on-primary:#000000;
  --color-accent:#79D2C7; --color-accent-hover:#C8ECE6; --color-on-accent:#000000; --color-link:#79D2C7;
  --bg-app:#000000; --surface-1:#000000; --surface-2:#000000; --surface-raised:#0A0A0A; --surface-inverse:#FFFFFF;
  --overlay-scrim:rgba(0,0,0,0.9);
  --text-primary:#FFFFFF; --text-secondary:#E0E0E0; --text-muted:#B0B0B0; --text-on-primary:#000000;
  --border-subtle:#1F1F1F; --border-default:#333333; --border-strong:#FFFFFF;
  --color-success:#5BE39B; --color-success-bg:#0A2A1B; --color-warning:#FFC152; --color-warning-bg:#2E2206;
  --color-error:#FF7A72; --color-error-bg:#2E0F0D;
  --state-listening:#79D2C7; --state-recording:#FF6259; --state-connected:#5BE39B; --state-offline:#B0B0B0; --state-reconnecting:#FFC152;
  --caption-bg:#000000; --caption-text:#FFFFFF; --caption-speaker:#79D2C7; --caption-low-confidence:#B0B0B0;
  --focus-ring:#FFFFFF; --focus-ring-offset:#000000; --disabled-bg:#1A1A1A; --disabled-text:#8A8A8A; --disabled-border:#333333;
  --color-primary-bg:#0F0F0F; --color-primary-bg-text:#FFFFFF;
  --color-accent-bg:#0A1F1C; --color-accent-bg-text:#79D2C7;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast:1ms; --dur-base:1ms; --dur-slow:1ms; --dur-pulse:1ms; }
}