/* Design tokens as CSS variables (§8.7) — single source of truth for the
   visual language. Palette follows the Standalone.html prototype (surfaces,
   tints, radii) modernized where the prototype fell short of WCAG 2.1 AA:
   every --*-text pair below was contrast-checked (>= 4.5:1 on card surfaces)
   in BOTH themes. Dark is the default; [data-theme="light"] opts in. */

:root {
  --font-sans: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Brand — teal. --brand for icons/accents/large text; --brand-strong for
     filled-button backgrounds (white text on it measures >= 5:1, while white
     on --brand does not — never swap them on buttons). */
  --brand: #0d9488;
  --brand-rgb: 13 148 136;
  --brand-strong: #0f766e;
  --brand-stronger: #115e59;

  /* Semantic state colors. Base = borders/dots/charts; -text = foreground on
     tinted or plain surfaces (theme-dependent, AA-checked); -rgb = alpha
     tints via rgb(var(--x-rgb) / .12), the prototype's tinting pattern. */
  --success: #22c55e;
  --success-rgb: 34 197 94;
  --success-strong: #16a34a;
  --warning: #f59e0b;
  --warning-rgb: 245 158 11;
  --warning-strong: #d97706;
  --danger: #ef4444;
  --danger-rgb: 239 68 68;
  --danger-strong: #dc2626;  /* filled-button bg — white text >= 4.5:1 */
  --info: #3b82f6;
  --info-rgb: 59 130 246;
  --info-strong: #2563eb;
  --accent-purple: #a855f7;
  --purple-rgb: 168 85 247;

  /* Dark theme (default) — prototype's refined dark palette. */
  --surface-0: #141625;      /* app background */
  --surface-1: #1d1f33;      /* cards, sidebar, topbar */
  --surface-2: #242741;      /* soft fills, hover, inputs */
  --border: #2a2d47;
  /* WCAG 1.4.11 (non-text contrast, 3:1): --border above is a decorative
     hairline for dividers and card edges, where 1.4.11 does not apply. But
     a form control's boundary IS the only thing identifying the control,
     and .input leaned on --border at 1.21:1. This is that boundary — kept
     as a SEPARATE token so raising it doesn't turn every quiet divider in
     the app into a hard line. */
  --border-strong: #676ea5;
  --text: #e8e9f3;
  --text-muted: #8f94b5;
  /* Prototype's #7b7f9e measures 4.14:1 on --surface-1 — below AA for the
     10-12px real content (timestamps, captions) it's used at everywhere.
     WCAG audit: the previous #868bab cleared surface-0/1 but measured
     4.37:1 on --surface-2 (inputs, hover fills, soft chips), where this
     token is genuinely used. Re-solved against the WORST of the three
     surfaces, not just the card. */
  --text-subtle: #898ead;

  --brand-text: #2dd4bf;
  --success-text: #22c55e;
  --warning-text: #fbbf24;
  --danger-text: #f87171;
  --info-text: #60a5fa;
  --purple-text: #c084fc;

  --focus-ring: #5eead4;
  --shadow-pop: 0 10px 26px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);
  --overlay: rgba(10, 11, 20, 0.62);

  --radius-sm: 0.375rem;   /* 6px  — pills' inner chips, small controls */
  --radius-md: 0.5rem;     /* 8px  — buttons, inputs, nav items */
  --radius-lg: 0.75rem;    /* 12px — cards, modals, dropdowns */

  --sidebar-w: 242px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 60px;

  /* Motion — transform/opacity only; app.css disables all of it under
     prefers-reduced-motion. */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  color-scheme: dark;
}

:root[data-theme="light"] {
  --surface-0: #f1f2f8;
  --surface-1: #ffffff;
  --surface-2: #f5f6fb;
  --border: #e7e9f5;
  --border-strong: #7d88c9;  /* see the dark block — 1.4.11 control boundary */
  --text: #232742;
  /* Prototype's muted (#7b7f9e) measures 3.96:1 on white — below AA. These
     darker values keep the same hue at >= 4.5:1. */
  --text-muted: #5b5f7a;
  /* 4.41:1 on --surface-0 (the app background) before the audit. */
  --text-subtle: #696d87;

  --brand-text: #0f766e;
  --success-text: #157e3c;
  --warning-text: #b25209;
  --danger-text: #b91c1c;
  --info-text: #1d4ed8;
  --purple-text: #7e22ce;

  --focus-ring: #0f766e;
  --shadow-pop: 0 10px 26px rgba(15, 17, 35, 0.16);
  --shadow-card: 0 1px 2px rgba(15, 17, 35, 0.06);
  --overlay: rgba(35, 39, 66, 0.45);

  color-scheme: light;
}