/* Stream Evolution design tokens — the ONLY place colors, type, spacing,
   radii, elevation and motion are defined. Every page links this first.

   Look: "sticker box". Grape-night surfaces, candy accents, chunky ink
   outlines and hard offset shadows that press down when clicked.
   Theme: dark by default; [data-theme="light"] on <html> switches to day. */

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #1a1033;
  --surface-1: #241747;
  --surface-2: #2e1f59;
  --surface-3: #3a2a6b;
  --overlay: rgba(10, 5, 25, .72);

  /* Lines + the hard "sticker" shadow color */
  --border: #43337a;
  --border-strong: #5d4a9e;
  --ink: #0b0619;

  /* Text */
  --fg: #fff7fb;
  --fg-muted: #cfc3f0;
  --fg-subtle: #a797d9;

  /* Brand + candy accents */
  --brand: #ffd23f;          /* lemon: primary actions */
  --brand-hover: #ffdc66;
  --on-brand: #1a1033;
  --pop: #ff5fa2;            /* bubblegum: highlights, selection, live */
  --on-pop: #1a1033;

  /* Status */
  --success: #3ee0a8;
  --warning: #ff9f1c;
  --danger: #ff6b5e;
  --info: #5cc8ff;
  --success-soft: rgba(62, 224, 168, .14);
  --warning-soft: rgba(255, 159, 28, .14);
  --danger-soft: rgba(255, 107, 94, .14);
  --info-soft: rgba(92, 200, 255, .14);
  --brand-soft: rgba(255, 210, 63, .14);
  --pop-soft: rgba(255, 95, 162, .16);

  --focus-ring: #5cc8ff;

  /* Type */
  --font: "Bricolage Grotesque", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;   /* body */
  --text-lg: 16px;
  --text-xl: 18px;
  --text-2xl: 22px;
  --text-3xl: 28px;
  --text-4xl: 36px;
  --text-5xl: 52px;
  --leading: 1.5;
  --leading-tight: 1.15;

  /* Spacing (4px grid) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

  /* Radii — larger containers get rounder corners */
  --r-sm: 8px;    /* chips inside inputs, small thumbs */
  --r-md: 12px;   /* buttons, inputs */
  --r-lg: 18px;   /* cards */
  --r-xl: 26px;   /* dialogs, hero panels */
  --r-full: 999px;

  /* Elevation: hard offset "sticker" shadows, not blurry glows */
  --line-w: 2px;
  --e-1: 3px 3px 0 var(--ink);
  --e-2: 5px 5px 0 var(--ink);
  --e-3: 8px 8px 0 var(--ink);

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
  --dur-slow: 280ms;

  /* Layout */
  --sidebar-w: 248px;
  --content-max: 1120px;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4efff;
  --surface-1: #ffffff;
  --surface-2: #f3edff;
  --surface-3: #e8ddff;
  --overlay: rgba(26, 16, 51, .45);
  --border: #1a1033;
  --border-strong: #1a1033;
  --ink: #1a1033;
  --fg: #1a1033;
  --fg-muted: #4a3b78;
  --fg-subtle: #5f5090;
  --brand: #ffd23f;
  --brand-hover: #ffc814;
  --pop: #c41f6a;
  --on-pop: #ffffff;
  --success: #0b7a52;
  --warning: #924800;
  --danger: #ad2519;
  --info: #0a6aa8;
  --success-soft: #d9f7ea;
  --warning-soft: #ffeccc;
  --danger-soft: #ffe1dd;
  --info-soft: #dcf0ff;
  --brand-soft: #fff4c7;
  --pop-soft: #ffe0ee;
  --focus-ring: #0a6aa8;
}