/*
 * Design tokens — mirrored from the locked product tokens
 * (packages/core/tokens/tokens.css) so the page and the app are one system.
 * Dark-scene values are additive; they never override the product palette.
 */
:root {
  /* Product palette (1:1 with the app) */
  --app: #f7f8f5;
  --paper: #ffffff;
  --paper-2: #fbfcfa;
  --ink: #0e1014;
  --ink-2: #30343b;
  --muted: #70757e;
  --faint: #a3a8b0;
  --line: rgba(14, 16, 20, 0.075);
  --line-2: rgba(14, 16, 20, 0.125);
  --blue: #1265f2;
  --blue-dark: #084ec7;
  --blue-soft: rgba(18, 101, 242, 0.085);
  --green: #12855d;
  --green-soft: rgba(18, 133, 93, 0.09);
  --amber: #b8730b;
  --amber-soft: rgba(184, 115, 11, 0.1);
  --red: #ca4c4c;
  --red-soft: rgba(202, 76, 76, 0.095);
  --violet: #7156d8;
  --violet-soft: rgba(113, 86, 216, 0.09);

  --shadow-card: 0 35px 95px rgba(25, 29, 35, 0.12), 0 5px 16px rgba(25, 29, 35, 0.055);
  --shadow-float: 0 34px 100px rgba(22, 25, 31, 0.21), 0 7px 24px rgba(22, 25, 31, 0.08);
  --shadow-lift: 0 18px 52px rgba(25, 29, 35, 0.075);

  /* Dark scene (hero + ask + close) */
  --night: #080a0f;
  --night-2: #0e1219;
  --night-line: rgba(255, 255, 255, 0.085);
  --night-line-2: rgba(255, 255, 255, 0.16);
  --on-night: #f4f6fa;
  --on-night-2: rgba(244, 246, 250, 0.72);
  /* Quiet captions still have to clear AA at 11-12px on the night scenes:
     0.44 measured 4.01:1, 0.58 clears 4.5:1. */
  --on-night-3: rgba(244, 246, 250, 0.58);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    Inter, "Segoe UI", sans-serif;

  /* Easing — only for non-gesture chrome. Anything grabbable uses JS springs. */
  --spring: cubic-bezier(0.2, 0.84, 0.2, 1);
  --spring-out: cubic-bezier(0.32, 0.72, 0, 1);

  --radius-card: 30px;
  --radius-tile: 20px;
  --radius-chip: 14px;

  --stage-w: min(1140px, 92vw);
  --topbar-h: 66px;
}

/* Type scale — tracking is size-specific: display tightens, body sits near 0. */
:root {
  --t-display: clamp(2.8rem, 6.4vw, 5.1rem);
  --t-display-track: -0.045em;
  --t-h2: clamp(2rem, 3.5vw, 3.05rem);
  --t-h2-track: -0.038em;
  --t-h3: clamp(1.25rem, 1.7vw, 1.6rem);
  --t-lede: clamp(1rem, 1.18vw, 1.16rem);
  --t-body: 0.95rem;
  --t-small: 0.8rem;
  --t-micro: 0.66rem;
}

@media (prefers-contrast: more) {
  :root {
    --line: rgba(14, 16, 20, 0.22);
    --muted: #4c515a;
    --night-line: rgba(255, 255, 255, 0.3);
    --on-night-2: rgba(244, 246, 250, 0.88);
    --on-night-3: rgba(244, 246, 250, 0.76);
  }
}