/* AudioCap — design tokens
   Single source of truth for colour, type, radii, motion, spacing.
   Matches the audicap2 design package: white surface, off-black ink,
   soft pill greys, deep rose accent (per plan §15.2). */

:root {
  /* === SURFACES === */
  --bg:           #ffffff;
  --bg-2:         #fafafa;          /* slightly off-white for inset rows / featured tiles */
  --bg-3:         #f4f4f2;
  --scrim:        #d9d9d6;          /* used behind sheet overlays */

  /* === INK === */
  --ink:          #0a0a0a;          /* primary text */
  --ink-2:        #1a1a1a;          /* hover dark / secondary */
  --muted:        #8a8a8a;          /* secondary copy */
  --muted-2:      #b4b4b4;          /* tertiary / placeholder */

  /* === PILL / NEUTRAL FILL === */
  --pill:         #f1f1f0;          /* default pill / chip / sheet inset */
  --pill-2:       #e7e7e6;          /* slightly deeper variant */
  --pill-hover:   #ebebea;
  --line:         #ececea;          /* hairline rule */
  --line-2:       #f4f4f2;          /* very faint rule (zebra etc) */

  /* === ACCENT — deep rose, plan §15.2 ===
     Used very sparingly: primary rose for hero highlight pills,
     destructive states reuse --warn rather than --accent. */
  --accent:       #b91d4d;          /* deep rose pink */
  --accent-2:     #9a173f;          /* hover/darker */
  --accent-tint:  #fdebef;          /* low-alpha rose for tinted backgrounds */
  --accent-fg:    #ffffff;          /* foreground on solid rose */

  /* === STATUS === */
  --warn:         #c73a2a;          /* destructive / danger */
  --warn-bg:      #fbeeec;
  --ok:           #2e7d32;

  /* === TYPE FAMILIES === */
  --serif:        'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans:         'Geist', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --mono:         'Geist Mono', ui-monospace, Menlo, monospace;

  /* === TYPE SCALE === */
  --t-display:    clamp(56px, 9vw, 128px);
  --t-h1:         clamp(44px, 6.4vw, 92px);
  --t-h2:         clamp(34px, 4.4vw, 60px);
  --t-h3:         clamp(28px, 3.6vw, 48px);
  --t-h4:         22px;
  --t-lead:       18px;
  --t-body:       15px;
  --t-small:      14px;
  --t-meta:       13px;
  --t-label:      11px;     /* mono labels, all-caps */

  /* === RADII === */
  --r-pill:       999px;
  --r-sheet:      28px;
  --r-card:       22px;
  --r-tile:       18px;     /* fmt-row, det-cell */
  --r-chip:       14px;     /* small inset */
  --r-mark:       8px;      /* brand mark */

  /* === SHADOWS === */
  --shadow-sheet: 0 30px 80px -30px rgba(0,0,0,0.18), 0 8px 30px -10px rgba(0,0,0,0.08);
  --shadow-pop:   0 18px 50px -16px rgba(0,0,0,0.5), 0 6px 18px -8px rgba(0,0,0,0.25);
  --shadow-soft:  0 8px 30px -10px rgba(0,0,0,0.12);
  --shadow-fab:   0 14px 40px -10px rgba(0,0,0,0.35);

  /* === LAYOUT === */
  --maxw:         1200px;
  --maxw-narrow:  1040px;
  --maxw-sheet:   980px;
  --pad-x:        32px;
  --pad-x-sm:     24px;
  --pad-x-xs:     20px;

  /* === MOTION === */
  --ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --d-fast:       150ms;
  --d-mid:        250ms;
  --d-slow:       400ms;
}

/* === MOBILE TUNING === */
@media (max-width: 768px) {
  :root {
    --pad-x:      20px;
    --pad-x-sm:   16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --d-fast: 0ms; --d-mid: 0ms; --d-slow: 0ms; }
}