/*
  slides.fm — design tokens
  See design/DESIGN.md for the full rationale. This file is the single
  source of truth for color, type, spacing, and motion primitives.
  Import this before theme.css (or before any app CSS).
*/

:root {
  /* ---------------------------------------------------------------
     Color — "Paper & Ink" monochrome + one Signal Red accent.
     Signal Red is reserved EXCLUSIVELY for live states. See DESIGN.md §2.
     --------------------------------------------------------------- */
  --color-paper:      #FAFAF7; /* background — never pure white */
  --color-ink:         #17160F; /* primary text — never pure black */
  --color-gray-1:      #E4E1D8; /* hairlines, dividers */
  --color-gray-2:      #8C887A; /* secondary text, captions, placeholders */
  --color-gray-3:      #48443A; /* dark chrome surface (control cluster, ended-session bar) */

  --color-accent:      #E63A2E; /* "Signal Red" — live states only */
  --color-accent-ink:  #FFFFFF; /* text/icon color on top of accent */
  --color-accent-wash: rgba(230, 58, 46, 0.10); /* text-edit pulse background */
  --color-accent-ring: rgba(230, 58, 46, 0.45); /* slide-edited pulse ring start */
  --color-accent-glow: rgba(230, 58, 46, 0.35); /* live-chip shadow */

  /* Chrome-surface overlays (white-on-dark, used inside the control cluster) */
  --overlay-weak:   rgba(255, 255, 255, 0.12);
  --overlay-medium: rgba(255, 255, 255, 0.20);
  --overlay-strong: rgba(255, 255, 255, 0.35);
  --overlay-hairline: rgba(255, 255, 255, 0.14);

  /* ---------------------------------------------------------------
     Type — one family, Schibsted Grotesk (variable, 400–900 + italics).
     Real app: @fontsource-variable/schibsted-grotesk. See DESIGN.md §1.
     --------------------------------------------------------------- */
  --font-family: 'Schibsted Grotesk', system-ui, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    900;

  /* Deck type scale (DESIGN.md §3.1) */
  --deck-size-hero:    clamp(3.5rem, 9vw, 7.5rem);   /* landing slide 1 only */
  --deck-size-h1:      clamp(2.75rem, 6.5vw, 5rem);  /* slide title */
  --deck-size-h2:      clamp(1.75rem, 4vw, 3rem);    /* subhead / section slide */
  --deck-size-body:    clamp(1.15rem, 1.8vw, 1.6rem);/* body / bullets */
  --deck-size-caption: 0.85rem;

  --deck-leading-hero: 0.92;
  --deck-leading-h1:   0.98;
  --deck-leading-h2:   1.05;
  --deck-leading-body: 1.5;
  --deck-leading-li:   1.6;

  --deck-tracking-hero: -0.02em;
  --deck-tracking-h1:   -0.015em;
  --deck-tracking-h2:   -0.01em;
  --deck-tracking-caption: 0.03em;

  /* UI chrome type scale (DESIGN.md §3.2) */
  --ui-size-micro:   0.75rem;   /* control-cluster labels/tooltips */
  --ui-size-chip:    0.8125rem; /* live chip label */
  --ui-size-button:  1rem;      /* Start, download buttons */
  --ui-size-state-h: 1.5rem;    /* loading/empty/error heading */
  --ui-size-state-b: 1rem;      /* loading/empty/error body */
  --ui-tracking-micro: 0.08em;
  --ui-tracking-chip:  0.04em;

  /* ---------------------------------------------------------------
     Spacing / radius / shadow primitives
     --------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-pill: 999px;
  --radius-md: 8px;

  --shadow-cluster: 0 8px 24px rgba(23, 22, 15, 0.22);
  --shadow-chip:    0 6px 16px var(--color-accent-glow);

  /* ---------------------------------------------------------------
     Motion durations/easings (DESIGN.md §6)
     --------------------------------------------------------------- */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

  --duration-fade-out: 600ms;  /* control cluster idle fade-out */
  --duration-fade-in:  150ms;  /* control cluster restore */
  --duration-hover:    150ms;  /* icon hover backgrounds */
  --duration-chip-in:  300ms;  /* live chip entrance */
  --duration-chip-out: 200ms;  /* live chip exit */
  --duration-bullet:   420ms;  /* new bullet fade/slide-in */
  --duration-text-edit: 900ms; /* edited-text accent pulse */
  --duration-slide-edited: 1.2s; /* on-slide edited ring pulse */
  --duration-slide-new: 500ms; /* whole new slide appended */
  --duration-rec-pulse: 1.6s;  /* rec dot heartbeat, infinite */

  --idle-fade-delay: 3000ms; /* control cluster: ms of no interaction before it fades */
}