/* tokens.css — Attendly design system. CSS custom properties on :root pierce the
   Shadow DOM boundary, so every pg-* web component reads these via var(). This is
   the single source of visual truth.

   Attendly is a B2B product for small-business owners, so the default surface is
   LIGHT, calm, and trustworthy — indigo primary, mint accent. A few surfaces
   (hero, the live "call" stage) opt into the dark palette via [data-surface="dark"]
   for contrast and focus. Text colors meet WCAG AA (>=4.5:1 body, >=3:1 large/UI). */
:root {
  color-scheme: light;

  /* Surfaces (light) */
  --pg-bg:        #f6f7fb;   /* app background */
  --pg-surface:   #ffffff;   /* cards / panels */
  --pg-surface-2: #eef1f8;   /* raised / hover / insets */
  --pg-border:    #dde2ee;
  --pg-overlay:   rgba(20, 24, 46, 0.45);

  /* Text (contrast-checked on --pg-bg / --pg-surface) */
  --pg-fg:        #161a2b;   /* primary text — ~14:1 */
  --pg-text:      #161a2b;
  --pg-text-dim:  #4a5268;   /* secondary — ~7.5:1 */
  --pg-text-mute: #66708a;   /* tertiary/labels — ~5:1, AA */

  /* Brand — indigo primary, mint secondary */
  --pg-accent:      #4f46e5;  /* indigo-600 */
  --pg-accent-2:    #6366f1;  /* indigo-500 (hover/links) */
  --pg-accent-ink:  #ffffff;  /* text on accent */
  --pg-mint:        #10b981;  /* emerald-500 — "live / answering" */
  --pg-mint-2:      #34d399;
  --pg-accent-soft: #eef0fe;  /* indigo wash for chips/insets on light */

  --pg-success:     #0ea371;
  --pg-warning:     #b9770a;
  --pg-danger:      #dc2626;
  --pg-danger-ink:  #ffffff;

  /* State accents for the voice pipeline (text+color, never color alone) */
  --pg-state-ready:     var(--pg-text-mute);
  --pg-state-listening: var(--pg-accent);
  --pg-state-thinking:  var(--pg-warning);
  --pg-state-speaking:  var(--pg-mint);
  --pg-state-error:     var(--pg-danger);

  /* Gradients / glows */
  --pg-grad:      linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #10b981 140%);
  --pg-grad-soft: linear-gradient(135deg, #eef0fe 0%, #e7fbf3 100%);
  --pg-glow:      0 12px 40px rgba(79, 70, 229, .28);

  /* Typography */
  --pg-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pg-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --pg-fs-xs: .75rem;  --pg-fs-sm: .875rem; --pg-fs-md: 1rem;
  --pg-fs-lg: 1.25rem; --pg-fs-xl: 1.75rem; --pg-fs-2xl: 2.5rem; --pg-fs-3xl: 3.25rem;
  --pg-lh: 1.55;

  /* Spacing scale (4px base) */
  --pg-1: .25rem; --pg-2: .5rem; --pg-3: .75rem; --pg-4: 1rem;
  --pg-5: 1.5rem; --pg-6: 2rem; --pg-7: 3rem; --pg-8: 4rem;

  /* Radii / shadows / layout */
  --pg-radius-sm: .5rem; --pg-radius: .75rem; --pg-radius-lg: 1.1rem; --pg-radius-pill: 999px;
  --pg-shadow:    0 1px 2px rgba(16,24,64,.06), 0 8px 24px rgba(16,24,64,.08);
  --pg-shadow-lg: 0 24px 60px rgba(16,24,64,.18);
  --pg-tap: 44px;            /* minimum touch target */
  --pg-z-modal: 1000; --pg-z-toast: 1100;

  /* Motion (respect reduced-motion at the component level too) */
  --pg-ease: cubic-bezier(.2,.7,.2,1);
  --pg-dur: 180ms;
  --pg-focus: 0 0 0 3px color-mix(in srgb, var(--pg-accent) 45%, transparent);
}

/* Dark surface island — used by the hero + the live call stage. Set
   [data-surface="dark"] on a wrapper and its pg-* descendants flip palette. */
/* The dark palette. Applied in three cases:
   1. [data-surface="dark"] — a forced dark island (hero, live call stage).
   2. :root[data-theme="dark"] — an explicit user/site choice (manual toggle hook).
   3. prefers-color-scheme: dark — the OS preference, unless the user forced light. */
[data-surface="dark"],
:root[data-theme="dark"] {
  color-scheme: dark;
  --pg-bg:        #0d1020;
  --pg-surface:   #161a2e;
  --pg-surface-2: #1f2440;
  --pg-border:    #2c3252;
  --pg-overlay:   rgba(5, 7, 16, 0.72);
  --pg-fg:        #f3f5fc;
  --pg-text:      #f3f5fc;
  --pg-text-dim:  #c3c9de;
  --pg-text-mute: #9aa2c0;
  --pg-accent:    #818cf8;
  --pg-accent-2:  #a5b4fc;
  --pg-accent-ink:#0b0e1c;
  --pg-accent-soft: #1d2342;
  --pg-shadow:    0 8px 30px rgba(0,0,0,.45);
  --pg-shadow-lg: 0 24px 60px rgba(0,0,0,.6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --pg-bg:        #0d1020;
    --pg-surface:   #161a2e;
    --pg-surface-2: #1f2440;
    --pg-border:    #2c3252;
    --pg-overlay:   rgba(5, 7, 16, 0.72);
    --pg-fg:        #f3f5fc;
    --pg-text:      #f3f5fc;
    --pg-text-dim:  #c3c9de;
    --pg-text-mute: #9aa2c0;
    --pg-accent:    #818cf8;
    --pg-accent-2:  #a5b4fc;
    --pg-accent-ink:#0b0e1c;
    --pg-accent-soft: #1d2342;
    --pg-shadow:    0 8px 30px rgba(0,0,0,.45);
    --pg-shadow-lg: 0 24px 60px rgba(0,0,0,.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --pg-dur: 1ms; }
}