/* ============================================================================
   TinyPoll design tokens — the single source of truth for colour, type,
   spacing, radii, elevation, motion and layout.

   Consumers:
     • website/   (marketing + legal pages)  → <link rel="stylesheet" href="/design-system/tokens.css">
                  (the deploy workflow publishes this file at /design-system/;
                  the pages pin data-theme="light" — they have no dark styles yet)
     • webapp/    (app.tinypoll.io, React + Tailwind v4) → @import then map in @theme
     • email templates → inline the light values at build time

   Rules:
     • Light values on :root are the canonical brand palette and MUST stay in
       sync with the tables in README.md. Change both in the same PR.
     • Dark values are defined twice: once for the explicit toggle
       (data-theme="dark") and once for the OS preference, guarded so it
       applies only when no explicit data-theme choice has been made.
     • Never give a colour its only definition inside a media / data-theme
       block. Every token below exists on :root first.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Surfaces ─────────────────────────────────────────────── */
  --paper:         #fafaf7;   /* page background */
  --paper-raised:  #ffffff;   /* cards, inputs, modals */
  --paper-sunken:  #f1f2ee;   /* table heads, wells, code blocks, closed pills */
  --track:         #eef0ec;   /* results-bar / meter track */

  /* ── Ink (text) ───────────────────────────────────────────── */
  --ink:           #191b19;   /* headings, primary text, primary button bg */
  --ink-soft:      #52564f;   /* body text */
  --ink-muted:     #6f736a;   /* small secondary text (AA-safe at any size) */
  --ink-faint:     #878b82;   /* metadata ≥ 18px, placeholders, decorative */
  --ink-inverse:   #fafaf7;   /* text on --ink */

  /* ── Lines ────────────────────────────────────────────────── */
  --line:          #e5e6e0;   /* hairlines, card borders, dividers */
  --line-strong:   #c9cbc3;   /* emphasised borders, closed-poll bars */
  --line-input:    var(--ink-faint); /* input borders (≥ 3:1 vs raised) */

  /* ── Accent (the one deep poll green) ─────────────────────── */
  --accent:        #0e7f52;
  --accent-deep:   #0b6b45;   /* hover, link text, text on accent-soft */
  --accent-soft:   #e8f3ed;   /* tinted fills */
  --accent-line:   #cbe4d6;   /* border of tinted fills */
  --accent-ink-on: #ffffff;   /* text/icons on --accent */

  /* ── Status ───────────────────────────────────────────────── */
  --success:       var(--accent);
  --success-soft:  var(--accent-soft);
  --success-line:  var(--accent-line);
  --warning:       #8a6410;
  --warning-soft:  #faf4e6;
  --warning-line:  #e6d5ab;
  --danger:        #b0350f;
  --danger-soft:   #fbeae4;
  --danger-line:   #f0c9bb;
  --danger-ink-on: #ffffff;
  --info:          #3568c4;
  --info-soft:     #e9eff9;
  --info-line:     #c7d6f0;
  --info-ink-on:   #ffffff;

  /* ── Focus, overlay, selection ────────────────────────────── */
  --focus-ring:        var(--accent);
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;
  --scrim:             rgba(25, 27, 25, 0.45);
  --selection:         var(--accent-soft);

  /* ── Poll results palette ─────────────────────────────────── */
  --bar-track:          var(--track);
  --bar-leader:         var(--accent);       /* option(s) with the most votes */
  --bar-other:          #c4dfd1;             /* every other option */
  --bar-other-strong:   #a9cdbb;             /* hover / focused row */
  --bar-closed-leader:  var(--ink);          /* closed polls go monochrome */
  --bar-closed-other:   var(--line-strong);
  --mark-mine:          var(--accent-deep);  /* "your vote" check + ring */
  --badge-anon:         var(--info);         /* anonymous pill */

  /* ── Celebration (marketing, App Home, and the app's one burst) ─ */
  --confetti-red:    #d9482b;
  --confetti-blue:   #3568c4;
  --confetti-gold:   #d9a13b;
  --confetti-green:  #3d8a5f;
  --confetti-plum:   #b8578f;
  --confetti-orange: #e07c3e;

  /* ── Elevation (very light; lean on lines) ────────────────── */
  --shadow-sm: 0 1px 2px rgba(25, 27, 25, 0.06);
  --shadow-md: 0 8px 24px -12px rgba(25, 27, 25, 0.25);
  --shadow-lg: 0 24px 60px -30px rgba(25, 27, 25, 0.25);
  --shadow-featured: 0 18px 44px -26px rgba(25, 27, 25, 0.35);

  /* ── Typography ───────────────────────────────────────────── */
  --display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --text-display-xl: clamp(42px, 6.5vw, 70px);
  --text-display-lg: clamp(30px, 4.5vw, 44px);
  --text-display-md: 32px;
  --text-display-sm: 24px;
  --text-heading:    17px;
  --text-body-lg:    19px;
  --text-body:       16px;
  --text-body-sm:    14px;
  --text-caption:    13px;
  --text-overline:   12.5px;

  --leading-display: 1.1;
  --leading-tight:   1.35;
  --leading-body:    1.6;
  --leading-snug:    1.5;

  --tracking-display: -0.015em;
  --tracking-hero:    -0.02em;
  --tracking-overline: 0.04em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-heading: 650;
  --weight-bold:    700;

  /* ── Spacing (4px base) ───────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-26: 104px;

  /* ── Sizing ───────────────────────────────────────────────── */
  --control-h-sm: 36px;
  --control-h:    44px;   /* minimum touch target */
  --control-h-lg: 52px;
  --icon-sm: 18px;
  --icon:    22px;
  --icon-lg: 26px;
  --avatar-sm: 24px;
  --avatar:    32px;
  --avatar-lg: 40px;

  /* ── Radii & borders ──────────────────────────────────────── */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   14px;
  --radius-xl:   16px;
  --radius-pill: 999px;
  --border:      1px;
  --border-emphasis: 2px;

  /* ── Layout ───────────────────────────────────────────────── */
  --width-wrap:    1080px;  /* marketing sections */
  --width-prose:   800px;   /* legal / long-form */
  --width-app:     1200px;  /* app shell content */
  --width-sidebar: 240px;
  --gutter:        28px;
  --gutter-mobile: 20px;

  /* ── Z-index ──────────────────────────────────────────────── */
  --z-base:     0;
  --z-sticky:   10;
  --z-dropdown: 20;
  --z-overlay:  30;
  --z-modal:    40;
  --z-toast:    50;
  --z-tooltip:  60;

  /* ── Motion ───────────────────────────────────────────────── */
  --dur-fast: 80ms;    /* press feedback */
  --dur:      150ms;   /* hover, colour, small reveals */
  --dur-slow: 240ms;   /* modals, drawers, toasts */
  --dur-bar:  600ms;   /* results bar fill, count-up */
  --dur-celebrate: 1400ms; /* the confetti burst, and nothing else */
  --ease-out:    cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* ── Dark theme: explicit toggle ───────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:         #141614;
  --paper-raised:  #1c1f1c;
  --paper-sunken:  #0f110f;
  --track:         #262a25;

  --ink:           #eef0ea;
  --ink-soft:      #b3b7ad;
  --ink-muted:     #979c93;
  --ink-faint:     #7f847b;
  --ink-inverse:   #141614;

  --line:          #2b2f2a;
  --line-strong:   #3d423b;

  --accent:        #3fae7c;
  --accent-deep:   #5cc292;
  --accent-soft:   #17302a;
  --accent-line:   #25493b;
  --accent-ink-on: #0c1a13;

  --warning:       #e0b356;
  --warning-soft:  #2a2413;
  --warning-line:  #4a3f1e;
  --danger:        #f08a66;
  --danger-soft:   #2f1a12;
  --danger-line:   #4d2a1c;
  --danger-ink-on: #0c1a13;
  --info:          #7fa4e8;
  --info-soft:     #161f30;
  --info-line:     #243552;
  --info-ink-on:   #0c1a13;

  --scrim:         rgba(0, 0, 0, 0.6);

  --bar-other:         #2c4a3d;
  --bar-other-strong:  #3a5f4f;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
  --shadow-featured: 0 18px 44px -26px rgba(0, 0, 0, 0.7);
}

/* ── Dark theme: OS preference (explicit light choice wins) ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --paper:         #141614;
    --paper-raised:  #1c1f1c;
    --paper-sunken:  #0f110f;
    --track:         #262a25;

    --ink:           #eef0ea;
    --ink-soft:      #b3b7ad;
    --ink-muted:     #979c93;
    --ink-faint:     #7f847b;
    --ink-inverse:   #141614;

    --line:          #2b2f2a;
    --line-strong:   #3d423b;

    --accent:        #3fae7c;
    --accent-deep:   #5cc292;
    --accent-soft:   #17302a;
    --accent-line:   #25493b;
    --accent-ink-on: #0c1a13;

    --warning:       #e0b356;
    --warning-soft:  #2a2413;
    --warning-line:  #4a3f1e;
    --danger:        #f08a66;
    --danger-soft:   #2f1a12;
    --danger-line:   #4d2a1c;
    --danger-ink-on: #0c1a13;
    --info:          #7fa4e8;
    --info-soft:     #161f30;
    --info-line:     #243552;
    --info-ink-on:   #0c1a13;

    --scrim:         rgba(0, 0, 0, 0.6);

    --bar-other:         #2c4a3d;
    --bar-other-strong:  #3a5f4f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px -12px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 24px 60px -30px rgba(0, 0, 0, 0.7);
    --shadow-featured: 0 18px 44px -26px rgba(0, 0, 0, 0.7);
  }
}

/* ── Reduced motion: collapse every duration ───────────────── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur:      0ms;
    --dur-slow: 0ms;
    --dur-bar:  0ms;
    --dur-celebrate: 0ms;
  }
}