/* Design tokens: the single source of truth for color/spacing/radius/shadow
   across the dashboard. Every other stylesheet (components.css) and every
   template builds on these custom properties instead of hardcoding hex
   values.

   v3 -- brand unification with the public marketing site (see marketing/
   static/marketing/css/site.css's --bg/--voice/--action tokens): replaces
   v2's unrelated Steel Blue / Yellow Green palette with the SAME amber
   ("voice") + teal ("action") accent pair the marketing site uses, on a
   near-black dark surface, so the logged-in product and the public site
   read as one brand instead of two. Every existing variable NAME from v2
   is kept (nothing in components.css or any template needed to change to
   pick this up) -- only the VALUES changed, plus one new token (--ease,
   the exact cubic-bezier the marketing site already uses everywhere) for
   the dropdown/interaction polish this same redesign pass added.

   Three-state theme contract: :root defines the complete LIGHT palette;
   prefers-color-scheme:dark (guarded so an explicit light choice always
   wins) redefines the same tokens for an unstamped document; [data-theme]
   redefines them again so the in-app toggle wins in both directions. See
   base.html for the toggle control + the tiny inline script that stamps
   data-theme before first paint (no flash of the wrong theme) -- dark is
   now that script's default when no preference is saved yet, matching the
   marketing site's always-dark look on a first visit. */

:root {
  /* Shared interaction easing -- the exact curve marketing/site.css uses
     everywhere (--ease), so motion feels like the same product. Not
     theme-branched, declared once. */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  /* surfaces -- a warm off-white canvas so every card actually separates
     from the page (ElevenLabs/Vapi-style depth), never a component sitting
     flat with zero contrast against its background. */
  --bg-canvas: #faf9f7;
  --bg-surface: #ffffff;
  --bg-surface-raised: #ffffff;
  --bg-inset: #f2efe9;
  --border-subtle: rgba(20, 15, 5, .07);
  --border-strong: #ddd8cd;

  /* text */
  --text-primary: #1c1a16;
  --text-secondary: #55524a;
  --text-muted: #8a8579;

  /* Primary actions are a deepened amber (the marketing site's brighter
     --voice amber is too light for white-on-fill contrast at button/link
     weight on a white surface -- this is the same hue family, tuned for
     light-mode legibility; dark mode below uses the marketing site's exact
     bright amber since it sits on a near-black surface instead). */
  --btn-primary-bg: #b8791f;
  --btn-primary-bg-hover: #a06a1a;
  --btn-primary-ink: #ffffff;
  --accent: #b8791f;
  --accent-subtle-bg: rgba(184, 121, 31, .14);

  /* semantic -- subtle-bg + colored-text, never a solid fill with white
     text (a filled saturated badge reads louder/heavier than this system
     wants on a light surface). Success derives from the teal "action" hue
     (the marketing palette has no dedicated success color, and teal
     already reads positive); danger is a warm coral-red neither brand
     palette defines, chosen to sit near amber on the wheel rather than
     fight it. */
  --success: #1f9c7e;
  --success-subtle-bg: rgba(79, 209, 174, .16);
  --success-text: #157a63;
  --warning: #a8790a;
  --warning-subtle-bg: rgba(184, 140, 20, .16);
  --warning-text: #86620a;
  --danger: #d94a30;
  --danger-subtle-bg: rgba(217, 74, 48, .13);
  --danger-text: #b83a22;
  --neutral-subtle-bg: #eeece7;
  --neutral-text: #5a574e;

  /* Secondary brand accent (the marketing site's teal "action" color) --
     used where a SECOND, distinct hue is needed alongside --accent (e.g.
     the "you" side of the call waveform, secondary chart series) without
     borrowing the success tokens' semantic meaning. */
  --secondary: #1f9c7e;
  --secondary-text: #157a63;
  --secondary-subtle-bg: rgba(79, 209, 174, .14);

  /* Neutral anchor, kept independent of the brand accent pair. */
  --charcoal: #474747;

  /* Chart data hues -- amber + teal (matching --accent/--secondary) plus a
     third, cooler hue neither brand palette defines, picked to read as
     clearly distinct from both without clashing. */
  --chart-1: #b8791f;
  --chart-2: #1f9c7e;
  --chart-3: #5b6bbf;
  --chart-1-wash: rgba(184, 121, 31, .12);

  /* scale */
  --radius-sm: .5rem;
  --radius-md: .75rem;
  --radius-lg: 1.125rem;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .08);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .12);
  --glow: 0 0 0 1px rgba(0, 0, 0, .03), var(--shadow-md);

  /* Sidebar -- now fully theme-aware (recolors with the toggle below), not
     a permanently-dark anchor. Active item is marked by an amber left
     border + tinted background, distinct from :hover. */
  --sidebar-bg: #fdfcfa;
  --sidebar-border: #ece8df;
  --sidebar-text: #6b675c;
  --sidebar-text-hover: #1c1a16;
  --sidebar-hover-bg: #f5f2ec;
  --sidebar-active-bg: rgba(184, 121, 31, .09);
  --sidebar-text-active: #b8791f;
  --sidebar-section-label: #9c9689;

  /* audio-visualizer panel on call_live.html -- intentionally NOT
     canvas-linked for its background (a fixed near-black surface, like a
     hardware meter, regardless of the light/dark toggle) -- so bar colors
     have to be LIGHT/saturated to show up against it, and stay the same
     across both themes (declared once, not theme-branched). The two bars
     are amber (agent -- the AI voice) and teal (you), the same brand pair
     used everywhere else. Hex mirrors the dark-mode --accent/--secondary
     since canvas fillStyle can't read CSS custom properties (see
     call_live.html's own comment).
  */
  --viz-bg: #0d1015;
  --viz-bar-you: #4fd1ae;
  --viz-bar-agent: #e8a857;

  --font-sans: 'Inter', 'Noto Sans Devanagari', -apple-system, 'Segoe UI', system-ui, Roboto, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: #0a0a0b;
    --bg-surface: #141416;
    --bg-surface-raised: #1a1a1d;
    --bg-inset: #1c1d20;
    --border-subtle: #2a2a2e;
    --border-strong: #3d3d42;

    --text-primary: #f5f3ef;
    --text-secondary: #b8b6b0;
    --text-muted: #85837e;

    --btn-primary-bg: #e8a857;
    --btn-primary-bg-hover: #f0bd7a;
    --btn-primary-ink: #1a1206;
    --accent: #e8a857;
    --accent-subtle-bg: rgba(232, 168, 87, .16);

    --success: #4fd1ae;
    --success-subtle-bg: rgba(79, 209, 174, .18);
    --success-text: #7fe0c4;
    --warning: #f0c869;
    --warning-subtle-bg: rgba(240, 200, 105, .18);
    --warning-text: #f0c869;
    --danger: #ff7a5c;
    --danger-subtle-bg: rgba(255, 122, 92, .2);
    --danger-text: #ff7a5c;
    --neutral-subtle-bg: #202124;
    --neutral-text: #b8b6b0;

    --secondary: #4fd1ae;
    --secondary-text: #7fe0c4;
    --secondary-subtle-bg: rgba(79, 209, 174, .18);

    --charcoal: #9a9a9a;

    --chart-1: #e8a857;
    --chart-2: #4fd1ae;
    --chart-3: #8f9bf0;
    --chart-1-wash: rgba(232, 168, 87, .16);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
    --glow: 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-md);

    --sidebar-bg: #101012;
    --sidebar-border: #232326;
    --sidebar-text: #a9a7a1;
    --sidebar-text-hover: #f5f3ef;
    --sidebar-hover-bg: #1a1a1d;
    --sidebar-active-bg: rgba(232, 168, 87, .14);
    --sidebar-text-active: #e8a857;
    --sidebar-section-label: #6f6d68;
  }
}

:root[data-theme="dark"] {
  --bg-canvas: #0a0a0b;
  --bg-surface: #141416;
  --bg-surface-raised: #1a1a1d;
  --bg-inset: #1c1d20;
  --border-subtle: #2a2a2e;
  --border-strong: #3d3d42;

  --text-primary: #f5f3ef;
  --text-secondary: #b8b6b0;
  --text-muted: #85837e;

  --btn-primary-bg: #e8a857;
  --btn-primary-bg-hover: #f0bd7a;
  --btn-primary-ink: #1a1206;
  --accent: #e8a857;
  --accent-subtle-bg: rgba(232, 168, 87, .16);

  --success: #4fd1ae;
  --success-subtle-bg: rgba(79, 209, 174, .18);
  --success-text: #7fe0c4;
  --warning: #f0c869;
  --warning-subtle-bg: rgba(240, 200, 105, .18);
  --warning-text: #f0c869;
  --danger: #ff7a5c;
  --danger-subtle-bg: rgba(255, 122, 92, .2);
  --danger-text: #ff7a5c;
  --neutral-subtle-bg: #202124;
  --neutral-text: #b8b6b0;

  --secondary: #4fd1ae;
  --secondary-text: #7fe0c4;
  --secondary-subtle-bg: rgba(79, 209, 174, .18);

  --charcoal: #9a9a9a;

  --chart-1: #e8a857;
  --chart-2: #4fd1ae;
  --chart-3: #8f9bf0;
  --chart-1-wash: rgba(232, 168, 87, .16);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  --glow: 0 0 0 1px rgba(255, 255, 255, .06), var(--shadow-md);

  --sidebar-bg: #101012;
  --sidebar-border: #232326;
  --sidebar-text: #a9a7a1;
  --sidebar-text-hover: #f5f3ef;
  --sidebar-hover-bg: #1a1a1d;
  --sidebar-active-bg: rgba(232, 168, 87, .14);
  --sidebar-text-active: #e8a857;
  --sidebar-section-label: #6f6d68;
}