/* PlayerFlow — Design Tokens (GADN-aligned) */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  --bg:             #fffdf8;
  --bg-subtle:      #f6f0e6;
  --surface:        #ffffff;
  --surface-soft:   hsl(42 70% 96%);
  --surface-raised: rgba(255,255,255,0.85);

  /* ── Text ─────────────────────────────────────────────── */
  --text:       hsl(220 27% 12%);
  --text-muted: hsl(215 25% 18%);
  --text-soft:  hsl(220 10% 40%);
  --text-xsoft: hsl(220 8% 58%);

  /* ── Primary (teal) ───────────────────────────────────── */
  --accent:       hsl(183 74% 28%);
  --accent-hover: hsl(183 74% 22%);
  --accent-soft:  hsl(183 60% 88%);
  --accent-xsoft: hsl(183 60% 95%);

  /* ── Orange accent ────────────────────────────────────── */
  --orange:       hsl(26 100% 56%);
  --orange-soft:  hsl(26 100% 94%);

  /* ── Secondary (warm amber) ───────────────────────────── */
  --secondary:    hsl(42 70% 93%);
  --secondary-fg: hsl(215 25% 18%);

  /* ── Semantic ─────────────────────────────────────────── */
  --success:      #059669;
  --success-soft: #d1fae5;
  --warning:      #d97706;
  --warning-soft: #fef3c7;
  --error:        #dc2626;
  --error-soft:   #fee2e2;
  --info:         #0284c7;
  --info-soft:    #e0f2fe;

  /* ── Borders ──────────────────────────────────────────── */
  --line:        hsl(40 24% 88%);
  --line-strong: hsl(40 20% 80%);
  --line-xstrong:hsl(40 16% 68%);

  /* ── Glass ────────────────────────────────────────────── */
  --glass-bg:     rgba(255,255,255,0.85);
  --glass-border: rgba(255,255,255,0.60);

  /* ── Radius ───────────────────────────────────────────── */
  --r-xs:  8px;
  --r-sm:  10px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  20px;
  --r-2xl: 28px;
  --r-3xl: 32px;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.05);
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 4px 12px -4px rgba(15,23,42,0.08);
  --shadow-md: 0 2px 8px rgba(15,23,42,0.06), 0 12px 28px -8px rgba(15,23,42,0.12);
  --shadow-soft: 0 18px 60px -22px rgba(15,23,42,0.25);
  --shadow-lg: 0 8px 24px rgba(15,23,42,0.08), 0 24px 48px -12px rgba(15,23,42,0.16);

  /* ── Focus ────────────────────────────────────────────── */
  --focus-ring: 0 0 0 2px hsl(183 74% 28%);

  /* ── Spacing (4px base) ───────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  40px;
  --sp-8:  48px;
  --sp-9:  64px;

  /* ── Shell ────────────────────────────────────────────── */
  --sidebar-w: 288px;
  --topbar-h:  72px;

  /* ── Font ─────────────────────────────────────────────── */
  --font-sans: "Avenir Next", "Segoe UI", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
}

/* ── Typography scale ─────────────────────────────────────── */
.text-display { font-size: clamp(1.75rem,2.5vw,2.5rem); line-height:1.06; letter-spacing:-0.035em; font-weight:700; }
.text-h1      { font-size: clamp(1.375rem,2vw,1.875rem); line-height:1.12; letter-spacing:-0.025em; font-weight:700; }
.text-h2      { font-size: clamp(1.125rem,1.5vw,1.375rem); line-height:1.18; letter-spacing:-0.02em; font-weight:650; }
.text-h3      { font-size: clamp(0.9375rem,1.1vw,1.0625rem); line-height:1.24; letter-spacing:-0.012em; font-weight:600; }
.text-body    { font-size:0.9375rem; line-height:1.55; }
.text-body-sm { font-size:0.875rem;  line-height:1.5; }
.text-caption { font-size:0.6875rem; line-height:1.4; letter-spacing:0.06em; text-transform:uppercase; font-weight:600; }