/* ============================================================
   QUED Metrics — design tokens
   Single source of truth for color, type, spacing, motion.
   ============================================================ */

:root {
  /* ---- Color ---- */
  --bg:            #0B0B0F;
  --bg-2:          #101016;
  --surface:       #15151C;
  --surface-2:     #1B1B24;
  --line:          rgba(255, 255, 255, .09);
  --line-strong:   rgba(255, 255, 255, .16);

  --text:          #F4F4F6;
  --muted:         #A2A2AE;   /* 7.1:1 on --bg */
  --faint:         #6E6E7C;

  --violet:        #7C4DFF;
  --violet-hi:     #8F66FF;
  --violet-soft:   #B39BFF;   /* 7.4:1 on --bg — safe for small mono labels */
  --violet-dim:    rgba(124, 77, 255, .14);
  --violet-edge:   rgba(124, 77, 255, .38);

  /* ---- Type ---- */
  --font-display: "Chakra Petch", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-body:    "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --fs-hero:  clamp(2.75rem, 8.5vw, 6.25rem);
  --fs-h2:    clamp(2rem, 4.6vw, 3.5rem);
  --fs-h3:    clamp(1.125rem, 1.6vw, 1.375rem);
  --fs-lede:  clamp(1rem, 1.5vw, 1.1875rem);
  --fs-body:  1rem;
  --fs-small: .9375rem;
  --fs-mono:  .6875rem;

  --lh-tight: 1.02;
  --lh-head:  1.12;
  --lh-body:  1.65;
  --ls-mono:  .18em;

  /* ---- Space ---- */
  --s-1: .5rem;
  --s-2: .75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --section-y: clamp(4.5rem, 10vw, 8rem);
  --gutter:    clamp(1.25rem, 4vw, 2.5rem);
  --maxw:      1180px;

  /* ---- Shape & depth ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-pill: 999px;

  --shadow-card:  0 1px 0 rgba(255,255,255,.04) inset;
  --shadow-lift:  0 18px 48px -20px rgba(124, 77, 255, .55);
  --shadow-btn:   0 10px 30px -12px rgba(124, 77, 255, .85);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.22, .68, .32, 1);
  --t-fast: .18s;
  --t-med:  .32s;
  --t-slow: .55s;
}