/* Pick2Stock League: design tokens (redesign 2026-09-13, see DESIGN.md).
   One committed dark look: warm near-black grounds, one ember accent taken from the hero film,
   mint for YES and rose for NO, frosted glass for controls. Geist only. */

:root {
  color-scheme: dark;

  /* grounds and surfaces */
  --bg: #0a0a0a;
  --bg-2: #101010;
  --surface: #151515;
  --surface-2: #1c1c1c;
  --line: #232323;
  --line-2: #313131;

  /* text */
  --text: #f2f2f2;
  --text-2: #c4c4c4;
  --muted: #969696;
  --faint: #666666;

  /* the one accent, and the two sides */
  /* user, 2026-09-17: "replace any orange buttons/glows make them white/grey instead". The accent is
     now neutral; only YES mint and NO rose stay coloured. */
  --ember: #f2f2f2;
  --ember-2: #d4d4d4;
  --yes: #7ee0b8;
  --no: #ff9aa8;
  --yes-tint: rgba(126, 224, 184, .12);
  --no-tint: rgba(255, 154, 168, .12);
  --yes-line: rgba(126, 224, 184, .42);
  --no-line: rgba(255, 154, 168, .42);
  --ember-tint: rgba(255, 255, 255, .12);
  --ember-line: rgba(255, 255, 255, .45);

  /* glass */
  --glass: rgba(255, 255, 255, .06);
  --glass-bd: rgba(255, 255, 255, .16);
  --glass-hi: rgba(255, 255, 255, .22);
  --glass-ember: rgba(255, 255, 255, .28);
  --glass-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55), 0 2px 6px -2px rgba(0, 0, 0, .35);
  --glass-solid: #1f1f1f;

  --danger: #ff9aa8;
  /* user, 2026-09-17: no orange on interactive chrome; the focus ring is white */
  --focus: rgba(242, 242, 242, .92);
  --scrim: rgba(5, 5, 5, .66);

  /* type: Geist only */
  --f-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --t-hero: clamp(3.25rem, 1.4rem + 7vw, 7.5rem);
  --t-h1: clamp(2.5rem, 1.5rem + 4vw, 5rem);
  --t-h2: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
  --t-h3: 1.375rem;
  --t-lead: clamp(1.0625rem, .95rem + .4vw, 1.25rem);
  --t-body: 1rem;
  --t-sm: .875rem;
  --t-xs: .8125rem;
  --t-eyebrow: .75rem;
  --track-head: -0.04em;
  --track-eyebrow: .14em;
  --lh-head: .97;

  /* shape */
  --r-card: 7px;
  --r-input: 4px;
  --r-pill: 999px;
  --r-tile: 4px;

  /* space */
  --maxw: 1120px;
  --gutter: 16px;
  --section-y: 76px;
  --header-h: 64px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  /* motion */
  --ease-out: cubic-bezier(.16, .84, .3, 1);
  --ease-soft: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms;
  --dur: 220ms;
  --dur-link: 320ms;
  --dur-reveal: 900ms;
  --stagger: 70ms;
}

@media (min-width: 720px) {
  :root { --gutter: 32px; --section-y: 112px; --header-h: 72px; }
}
@media (min-width: 1100px) {
  :root { --gutter: 40px; --section-y: 148px; }
}

/* Old token names, mapped onto the new palette so any markup still carrying them stays legible. */
:root {
  --ground: var(--bg);
  --surface-3: var(--bg-2);
  --ink: var(--text);
  --ink-2: var(--text-2);
  --line-strong: var(--line-2);
  --flood: var(--ember);
  --on-flood: #0d0d0d;
  --yes-wash: var(--yes-tint);
  --no-wash: var(--no-tint);
  --f-display: var(--f-sans);
  --f-body: var(--f-sans);
  --f-mono: var(--f-sans);
  --ease: var(--ease-soft);
  --t-fast: var(--dur-fast);
  --t-mid: 260ms;
}