/* ==========================================================================
   Pollzee — Bento design tokens  v1.0
   Layers:  1. Primitives (raw values, never used in components directly)
            2. Semantic   (meaning: surface, text, action, live, chart…)
            3. Component  (button, input, tile, badge, poll…)
   Themes:  default = Corporate (light, warm stone)
            [data-theme="stage"] = big screen / Fun (dark)
   Fonts:   Onest 400/500/600/700 + Geist Mono 500, self-hosted in /fonts (see @font-face in pulse.css).
   Icons:   Lucide (1.5px stroke). Sizes via --pz-icon-*.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------- 1. PRIMITIVES ---------- */

  /* Stone — warm neutral */
  --pz-white: #FFFFFF;
  --pz-stone-25:  #FAF9F6;
  --pz-stone-50:  #F7F6F2;
  --pz-stone-100: #F2F1EC;
  --pz-stone-150: #EFEDE7;
  --pz-stone-200: #E6E4DC;
  --pz-stone-300: #D9D6CC;
  --pz-stone-400: #B8B5AA;
  --pz-stone-450: #A3A199;
  --pz-stone-500: #8C897F;
  --pz-stone-600: #5C5A52;
  --pz-stone-700: #3A3934;
  --pz-stone-750: #2A2A2A;
  --pz-stone-775: #232323;
  --pz-stone-800: #1A1A1A;
  --pz-stone-900: #141414;
  --pz-stone-950: #0E0E0E;

  /* Orange — the one accent */
  --pz-orange-50:  #FFF1EA;
  --pz-orange-100: #FFE3D6;
  --pz-orange-200: #FFD3BF;
  --pz-orange-300: #FFA47A;
  --pz-orange-400: #FF8A5C;
  --pz-orange-500: #FF5B1F;
  --pz-orange-550: #EB4F15;
  --pz-orange-600: #C9410B;
  --pz-orange-700: #B23E0C;
  --pz-orange-800: #8A3A14;
  --pz-orange-900: #5C2508;

  /* Status (used sparingly — orange carries most signal) */
  --pz-green-100: #E3F3EA;
  --pz-green-700: #1F7A4D;
  --pz-amber-100: #FFF1CC;
  --pz-amber-700: #8A5A00;
  --pz-red-100:   #FDE4E1;
  --pz-red-700:   #B42318;

  /* Reactions */
  --pz-flame: #E8590C;
  --pz-heart: #D6336C;
  --pz-party: #C28A00;

  /* Type */
  --pz-font-sans: 'Onest', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pz-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pz-weight-regular: 400;
  --pz-weight-medium: 500;
  --pz-weight-semibold: 600;
  --pz-weight-bold: 700;

  --pz-size-11: 11px;  --pz-size-12: 12px;  --pz-size-13: 13px;  --pz-size-14: 14px;
  --pz-size-15: 15px;  --pz-size-17: 17px;  --pz-size-19: 19px;  --pz-size-21: 21px;
  --pz-size-26: 26px;  --pz-size-30: 30px;  --pz-size-40: 40px;  --pz-size-52: 52px;
  --pz-size-56: 56px;  --pz-size-64: 64px;  --pz-size-88: 88px;

  --pz-leading-none: 1;
  --pz-leading-tight: 1.04;
  --pz-leading-snug: 1.15;
  --pz-leading-normal: 1.45;
  --pz-leading-relaxed: 1.55;

  --pz-tracking-tightest: -0.045em;
  --pz-tracking-tighter: -0.035em;
  --pz-tracking-tight: -0.02em;
  --pz-tracking-normal: 0;
  --pz-tracking-wide: 0.06em;

  /* Space — 4px base, 2px half-steps below 12 */
  --pz-space-0: 0;
  --pz-space-0-5: 2px;
  --pz-space-1: 4px;
  --pz-space-1-5: 6px;
  --pz-space-2: 8px;
  --pz-space-2-5: 10px;
  --pz-space-3: 12px;
  --pz-space-3-5: 14px;
  --pz-space-4: 16px;
  --pz-space-5: 20px;
  --pz-space-6: 24px;
  --pz-space-7: 28px;
  --pz-space-8: 32px;
  --pz-space-10: 40px;
  --pz-space-11: 44px;
  --pz-space-14: 56px;
  --pz-space-18: 72px;
  --pz-space-20: 80px;

  /* Radius */
  --pz-radius-xs: 4px;
  --pz-radius-sm: 6px;
  --pz-radius-md: 8px;
  --pz-radius-lg: 10px;
  --pz-radius-xl: 12px;
  --pz-radius-2xl: 14px;
  --pz-radius-3xl: 16px;
  --pz-radius-4xl: 20px;
  --pz-radius-5xl: 22px;
  --pz-radius-full: 999px;

  /* Elevation — the system is mostly flat; shadows only for lift */
  --pz-shadow-none: none;
  --pz-shadow-xs: 0 1px 2px rgb(20 20 20 / 0.08);
  --pz-shadow-sm: 0 2px 8px rgb(20 20 20 / 0.06);
  --pz-shadow-md: 0 8px 24px rgb(20 20 20 / 0.08);
  --pz-shadow-lg: 0 12px 40px rgb(20 20 20 / 0.08);
  --pz-shadow-xl: 0 24px 64px rgb(20 20 20 / 0.16);

  /* Motion */
  --pz-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pz-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --pz-ease-linear: linear;
  --pz-dur-instant: 80ms;
  --pz-dur-fast: 120ms;
  --pz-dur-base: 200ms;
  --pz-dur-slow: 320ms;
  --pz-dur-chart: 600ms;
  --pz-dur-pulse: 1400ms;

  /* Sizes */
  --pz-control-xs: 28px;
  --pz-control-sm: 32px;
  --pz-control-md: 36px;
  --pz-control-lg: 40px;
  --pz-control-xl: 44px;
  --pz-control-2xl: 48px;
  --pz-control-touch: 54px;
  --pz-icon-sm: 14px;
  --pz-icon-md: 16px;
  --pz-icon-lg: 18px;
  --pz-icon-xl: 22px;

  /* Layout */
  --pz-frame: 1440px;
  --pz-sidebar: 232px;
  --pz-rail-sm: 280px;
  --pz-rail-md: 320px;
  --pz-rail-lg: 380px;
  --pz-topbar: 60px;
  --pz-nav-marketing: 68px;
  --pz-page-pad: 40px;
  --pz-app-pad: 12px;
  --pz-grid-gap: 12px;
  --pz-content-max: 1360px;
  --pz-prose-max: 640px;

  --pz-z-base: 0;
  --pz-z-sticky: 10;
  --pz-z-dropdown: 100;
  --pz-z-overlay: 200;
  --pz-z-modal: 300;
  --pz-z-toast: 400;
  --pz-z-tooltip: 500;

  /* ---------- 2. SEMANTIC ---------- */

  /* Surfaces */
  --color-bg: var(--pz-stone-100);                 /* page canvas behind tiles */
  --color-surface: var(--pz-white);                /* default tile */
  --color-surface-muted: var(--pz-stone-50);       /* fields, rows inside a tile */
  --color-surface-subtle: var(--pz-stone-25);      /* table header */
  --color-surface-sunken: var(--pz-stone-100);     /* secondary buttons, tracks */
  --color-surface-inverse: var(--pz-stone-900);    /* live / highlight tile */
  --color-surface-inverse-raised: var(--pz-stone-775);
  --color-surface-accent: var(--pz-orange-500);    /* CTA tile */
  --color-surface-accent-soft: var(--pz-orange-100);
  --color-surface-accent-subtle: var(--pz-orange-50); /* selected row */

  /* Text */
  --color-text: var(--pz-stone-900);
  --color-text-muted: var(--pz-stone-600);         /* 6.5:1 on white */
  --color-text-placeholder: var(--pz-stone-500);   /* decorative only, 3.4:1 */
  --color-text-disabled: var(--pz-stone-400);
  --color-text-inverse: var(--pz-white);
  --color-text-inverse-muted: var(--pz-stone-450);
  --color-text-accent: var(--pz-orange-700);       /* 5.9:1 on white, 4.8:1 on orange-100 */
  --color-text-accent-strong: var(--pz-orange-800);
  --color-text-on-accent: var(--pz-white);
  --color-text-on-accent-soft: var(--pz-orange-900);
  --color-text-accent-inverse: var(--pz-orange-400); /* orange text on dark */

  /* Borders */
  --color-border: var(--pz-stone-200);
  --color-border-subtle: var(--pz-stone-150);
  --color-border-strong: var(--pz-stone-300);
  --color-border-dashed: var(--pz-stone-300);
  --color-border-focus: var(--pz-orange-500);
  --color-border-danger: #F6C9B6;
  --focus-ring: 0 0 0 3px var(--pz-orange-100);

  /* Actions */
  --color-action-primary: var(--pz-orange-500);
  --color-action-primary-hover: var(--pz-orange-550);
  --color-action-primary-strong: var(--pz-orange-600); /* use when AA 4.5:1 is required for small text */
  --color-action-neutral: var(--pz-stone-900);
  --color-action-neutral-hover: var(--pz-stone-800);
  --color-action-secondary: var(--pz-stone-100);
  --color-action-secondary-hover: var(--pz-stone-200);
  --color-action-disabled: var(--pz-stone-200);

  /* Live / status */
  --color-live: var(--pz-orange-500);
  --color-live-soft: var(--pz-orange-100);
  --color-live-text: var(--pz-orange-700);
  --color-success: var(--pz-green-700);
  --color-success-soft: var(--pz-green-100);
  --color-warning: var(--pz-amber-700);
  --color-warning-soft: var(--pz-amber-100);
  --color-danger: var(--pz-red-700);
  --color-danger-soft: var(--pz-red-100);

  /* Data viz — leader is always orange-500 */
  --color-chart-leader: var(--pz-orange-500);
  --color-chart-2: var(--pz-orange-300);
  --color-chart-3: var(--pz-orange-200);
  --color-chart-4: var(--pz-stone-900);
  --color-chart-5: var(--pz-stone-400);
  --color-chart-track: var(--pz-stone-100);
  --color-chart-idle: var(--pz-stone-200);

  --color-reaction-flame: var(--pz-flame);
  --color-reaction-heart: var(--pz-heart);
  --color-reaction-party: var(--pz-party);
  --color-reaction-like: var(--pz-stone-900);

  /* Type roles — use as `font: var(--type-x); letter-spacing: var(--type-x-tracking);` */
  --type-display-xl: var(--pz-weight-bold) var(--pz-size-56)/1.02 var(--pz-font-sans);
  --type-display-xl-tracking: var(--pz-tracking-tightest);
  --type-display-lg: var(--pz-weight-bold) var(--pz-size-40)/1.08 var(--pz-font-sans);
  --type-display-lg-tracking: -0.04em;
  --type-heading-xl: var(--pz-weight-bold) var(--pz-size-30)/var(--pz-leading-snug) var(--pz-font-sans);
  --type-heading-xl-tracking: var(--pz-tracking-tighter);
  --type-heading-lg: var(--pz-weight-bold) var(--pz-size-26)/1.2 var(--pz-font-sans);
  --type-heading-lg-tracking: -0.03em;
  --type-heading-md: var(--pz-weight-semibold) var(--pz-size-21)/1.25 var(--pz-font-sans);
  --type-heading-md-tracking: var(--pz-tracking-tight);
  --type-heading-sm: var(--pz-weight-semibold) var(--pz-size-15)/1.3 var(--pz-font-sans);
  --type-heading-sm-tracking: var(--pz-tracking-normal);
  --type-body-lg: var(--pz-weight-regular) var(--pz-size-17)/var(--pz-leading-relaxed) var(--pz-font-sans);
  --type-body-md: var(--pz-weight-regular) var(--pz-size-15)/1.5 var(--pz-font-sans);
  --type-body-sm: var(--pz-weight-regular) var(--pz-size-14)/var(--pz-leading-normal) var(--pz-font-sans);
  --type-label-md: var(--pz-weight-medium) var(--pz-size-14)/1.3 var(--pz-font-sans);
  --type-label-sm: var(--pz-weight-medium) var(--pz-size-13)/1.3 var(--pz-font-sans);
  --type-caption: var(--pz-weight-regular) var(--pz-size-12)/1.4 var(--pz-font-sans);
  --type-mono-label: var(--pz-weight-medium) var(--pz-size-12)/1.3 var(--pz-font-mono);
  --type-mono-label-tracking: var(--pz-tracking-wide);
  --type-stat-xl: var(--pz-weight-bold) var(--pz-size-40)/1 var(--pz-font-sans);
  --type-stat-lg: var(--pz-weight-bold) 32px/1 var(--pz-font-sans);
  --type-stat-md: var(--pz-weight-bold) 28px/1 var(--pz-font-sans);
  --type-stat-tracking: -0.035em;
  --type-code-xl: var(--pz-weight-bold) var(--pz-size-64)/1 var(--pz-font-sans);
  --type-code-tracking: var(--pz-tracking-wide);
  /* Stage (projected) */
  --type-stage-title: var(--pz-weight-bold) 60px/1.02 var(--pz-font-sans);
  --type-stage-stat: var(--pz-weight-bold) 48px/1 var(--pz-font-sans);
  --type-stage-body: var(--pz-weight-medium) 22px/1.3 var(--pz-font-sans);

  /* ---------- 3. COMPONENT ---------- */

  /* Button */
  --button-height-sm: var(--pz-control-sm);
  --button-height-md: var(--pz-control-md);
  --button-height-lg: var(--pz-control-2xl);
  --button-height-touch: var(--pz-control-touch);
  --button-pad-sm: 0 var(--pz-space-3);
  --button-pad-md: 0 var(--pz-space-4);
  --button-pad-lg: 0 22px;
  --button-radius-sm: var(--pz-radius-md);
  --button-radius-md: var(--pz-radius-lg);
  --button-radius-lg: var(--pz-radius-xl);
  --button-radius-touch: var(--pz-radius-3xl);
  --button-gap: var(--pz-space-2);
  --button-font: var(--pz-weight-semibold) var(--pz-size-14)/1 var(--pz-font-sans);
  --button-primary-bg: var(--color-action-primary);
  --button-primary-bg-hover: var(--color-action-primary-hover);
  --button-primary-fg: var(--color-text-on-accent);
  --button-neutral-bg: var(--color-action-neutral);
  --button-neutral-bg-hover: var(--color-action-neutral-hover);
  --button-neutral-fg: var(--color-text-inverse);
  --button-secondary-bg: var(--color-action-secondary);
  --button-secondary-bg-hover: var(--color-action-secondary-hover);
  --button-secondary-fg: var(--color-text);
  --button-on-surface-bg: var(--color-surface);       /* white button on stone canvas */
  --button-disabled-bg: var(--color-action-disabled);
  --button-disabled-fg: var(--pz-stone-500);
  --button-transition: background-color var(--pz-dur-fast) var(--pz-ease-out);

  /* Input */
  --input-height: 42px;
  --input-height-touch: var(--pz-control-2xl);
  --input-pad: 0 var(--pz-space-3);
  --input-radius: var(--pz-radius-lg);
  --input-radius-touch: var(--pz-radius-xl);
  --input-bg: var(--color-surface-muted);
  --input-bg-focus: var(--color-surface);
  --input-border: 1px solid var(--color-border);
  --input-border-focus: 1px solid var(--color-border-focus);
  --input-ring-focus: var(--focus-ring);
  --input-font: var(--type-body-sm);
  --input-placeholder: var(--color-text-placeholder);
  --input-label-font: var(--type-label-sm);
  --input-label-gap: var(--pz-space-1-5);
  --code-cell-size: 64px;
  --code-cell-radius: var(--pz-radius-2xl);

  /* Tile (the core layout unit) */
  --tile-gap: var(--pz-grid-gap);
  --tile-radius-app: var(--pz-radius-3xl);
  --tile-radius-marketing: var(--pz-radius-4xl);
  --tile-radius-stage: var(--pz-radius-5xl);
  --tile-radius-phone: var(--pz-radius-5xl);
  --tile-pad-sm: var(--pz-space-4);
  --tile-pad-md: var(--pz-space-5);
  --tile-pad-lg: var(--pz-space-7);
  --tile-pad-hero: var(--pz-space-11);
  --tile-bg: var(--color-surface);
  --tile-bg-live: var(--color-surface-inverse);
  --tile-bg-highlight: var(--color-surface-accent-soft);
  --tile-bg-cta: var(--color-surface-accent);
  --row-bg: var(--color-surface-muted);
  --row-radius: var(--pz-radius-xl);
  --row-pad: var(--pz-space-2-5) var(--pz-space-3);
  --divider: 1px solid #F0EEE8;

  /* Badge / pill */
  --badge-height: 22px;
  --badge-pad: 0 9px;
  --badge-radius: var(--pz-radius-full);
  --badge-font: var(--pz-weight-semibold) var(--pz-size-12)/1 var(--pz-font-sans);
  --badge-live-bg: var(--color-live-soft);
  --badge-live-fg: var(--color-live-text);
  --badge-neutral-bg: var(--color-surface-sunken);
  --badge-neutral-fg: var(--color-text-muted);
  --badge-inverse-bg: var(--color-surface-inverse);
  --badge-inverse-fg: var(--color-text-inverse);
  --live-dot-size: 6px;

  /* Segmented control / tabs */
  --segmented-bg: var(--color-surface-sunken);
  --segmented-pad: 3px;
  --segmented-radius: 11px;
  --segmented-item-radius: var(--pz-radius-md);
  --segmented-item-active-bg: var(--color-surface);
  --segmented-item-active-shadow: var(--pz-shadow-xs);
  --pill-tab-active-bg: var(--color-surface-inverse);
  --pill-tab-active-fg: var(--color-text-inverse);

  /* Navigation */
  --nav-item-height: var(--pz-control-md);
  --nav-item-radius: var(--pz-radius-lg);
  --nav-item-pad: 0 var(--pz-space-2-5);
  --nav-item-fg: var(--color-text-muted);
  --nav-item-active-bg: var(--color-surface);
  --nav-item-active-fg: var(--color-text);

  /* Toggle */
  --toggle-w: 36px;
  --toggle-h: 22px;
  --toggle-knob: 18px;
  --toggle-on: var(--color-action-primary);
  --toggle-off: var(--pz-stone-200);

  /* Upvote */
  --upvote-w: 42px;
  --upvote-h: 46px;
  --upvote-radius: var(--pz-radius-lg);
  --upvote-bg: var(--color-surface);          /* inside a muted row */
  --upvote-bg-on-surface: var(--color-surface-muted);
  --upvote-active-bg: var(--color-action-primary);
  --upvote-active-fg: var(--color-text-on-accent);

  /* Poll results */
  --poll-bar-h-sm: 8px;
  --poll-bar-h-md: 12px;
  --poll-bar-radius: var(--pz-radius-full);
  --poll-column-radius: var(--pz-radius-xl);
  --poll-column-radius-stage: 18px;
  --poll-track: var(--color-chart-track);
  --poll-transition: var(--pz-dur-chart) var(--pz-ease-out);

  /* Answer option (audience phone) */
  --answer-min-h: 58px;
  --answer-radius: var(--pz-radius-2xl);
  --answer-bg: var(--color-surface-muted);
  --answer-selected-border: var(--color-action-primary);
  --answer-result-fill: var(--color-surface-accent-soft);
  --quiz-option-h: 118px;
  --quiz-option-radius: 18px;

  /* Avatar */
  --avatar-sm: 30px;
  --avatar-md: 34px;
  --avatar-lg: 40px;
  --avatar-radius: var(--pz-radius-full);
}

/* Explicit "paper" (Pollzee's Formal look) is the default Corporate theme: a no-op alias of :root. */
[data-theme="paper"] {
  color-scheme: light;
}

/* Big screen + Fun theme: same components, dark stage */
[data-theme="stage"],
[data-theme="fun"] {
  color-scheme: dark;
  --color-bg: var(--pz-stone-950);
  --color-surface: var(--pz-stone-800);
  --color-surface-muted: var(--pz-stone-775);
  --color-surface-subtle: var(--pz-stone-800);
  --color-surface-sunken: var(--pz-stone-775);
  --color-surface-inverse: var(--pz-white);
  --color-surface-inverse-raised: var(--pz-stone-50);
  --color-surface-accent-soft: #3A1E12;
  --color-text: var(--pz-white);
  --color-text-muted: var(--pz-stone-450);
  --color-text-placeholder: var(--pz-stone-500);
  --color-text-inverse: var(--pz-stone-900);
  --color-text-accent: var(--pz-orange-400);
  --color-border: var(--pz-stone-750);
  --color-border-subtle: var(--pz-stone-775);
  --color-action-secondary: var(--pz-stone-775);
  --color-action-secondary-hover: var(--pz-stone-750);
  --color-action-neutral: var(--pz-white);
  --color-action-neutral-hover: var(--pz-stone-100);
  --color-chart-track: var(--pz-stone-750);
  --color-chart-4: var(--pz-white);
  --color-reaction-flame: var(--pz-orange-400);
  --color-reaction-heart: #FF7AA8;
  --color-reaction-party: #FFD166;
  --color-reaction-like: var(--pz-white);
  --divider: 1px solid var(--pz-stone-750);
  --tile-radius-app: var(--pz-radius-5xl);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --pz-dur-fast: 0ms;
    --pz-dur-base: 0ms;
    --pz-dur-slow: 0ms;
    --pz-dur-chart: 0ms;
  }
}