/* =============================================================================
   Art For That — Design Tokens
   The single source of truth. Everything downstream reads from these variables;
   nothing else hard-codes a hex value, a font stack, or a raw pixel scale.

   Brand ratio (deliberate): ~65% white/bright · ~24% ink/graphite ·
   ~7% magenta · ~4% lime. Keep magenta and lime as accents, never fields.
   ========================================================================== */

:root {
  /* --- Brand palette (from the mood board) ------------------------------- */
  --c-white:      #ffffff;
  --c-ink:        #0b0b0c;   /* near-black — text, dark sections */
  --c-magenta:    #ef1dda;   /* the pop. CTAs, highlights, signature shadow */
  --c-lime:       #dcff77;   /* the second, rarer pop */
  --c-graphite:   #525151;   /* brand gray — secondary text, quiet UI */

  /* --- Derived tints & accessible variants ------------------------------- */
  /* #ef1dda is too light for small text on white; use --c-magenta-ink for
     magenta-colored text, and reserve --c-magenta for fills/shadows. */
  --c-magenta-ink:  #b7009f;
  --c-magenta-soft: #fde6fb;
  --c-lime-ink:     #5a7000;   /* lime as readable text/icon on white */
  --c-lime-soft:    #f6ffdb;

  --c-paper:      #ffffff;     /* dominant surface */
  --c-paper-2:    #f7f7f4;     /* subtle raised/alt surface */
  --c-paper-3:    #efeeea;     /* inset / track */
  --c-graphite-2: #767573;     /* muted text */
  --c-line:       #e7e6e2;     /* hairline rules & borders */
  --c-line-strong:#0b0b0c;     /* structural black borders */

  /* On-ink (for dark sections) */
  --c-on-ink:        #ffffff;
  --c-on-ink-muted:  #b6b5b2;
  --c-on-ink-line:   #2a2a2b;

  /* --- Semantic roles (components read these, not raw colors) ------------- */
  --bg:            var(--c-paper);
  --bg-alt:        var(--c-paper-2);
  --text:          var(--c-ink);
  --text-muted:    var(--c-graphite);
  --text-faint:    var(--c-graphite-2);
  --border:        var(--c-line);
  --accent:        var(--c-magenta);
  --accent-text:   var(--c-magenta-ink);
  --accent-2:      var(--c-lime);
  --focus:         var(--c-magenta);

  /* --- Type ---------------------------------------------------------------- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;
  --fw-heavy:   800;
  --fw-black:   900;

  /* Fluid type scale — Inter, tight optical tracking on the big end. */
  --fs-eyebrow: 0.78rem;                             /* mono labels */
  --fs-xs:   0.8125rem;
  --fs-sm:   0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md:   1.1875rem;
  --fs-lg:   clamp(1.35rem, 1.05rem + 1.3vw, 1.75rem);
  --fs-xl:   clamp(1.7rem, 1.2rem + 2.2vw, 2.5rem);
  --fs-2xl:  clamp(2.3rem, 1.4rem + 3.8vw, 3.75rem);
  --fs-3xl:  clamp(3rem, 1.4rem + 6.4vw, 6rem);      /* display / hero */

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  --tracking-tight: -0.03em;
  --tracking-snug:  -0.01em;
  --tracking-wide:  0.02em;
  --tracking-mono:  0.14em;   /* uppercase mono eyebrows */

  /* --- Space scale (0.25rem base) ---------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  3rem;
  --sp-8:  4rem;
  --sp-9:  6rem;
  --sp-10: 8rem;

  /* --- Radii -------------------------------------------------------------- */
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   22px;
  --radius-xl:   30px;
  --radius-pill: 999px;

  /* --- Borders ------------------------------------------------------------ */
  --bw:        2px;    /* the brand likes a confident 2px line */
  --bw-thick:  3px;

  /* --- The signature: hard, blur-less offset shadows --------------------- */
  --offset:        6px;
  --offset-sm:     4px;
  --shadow-magenta: var(--offset) var(--offset) 0 0 var(--c-magenta);
  --shadow-lime:    var(--offset) var(--offset) 0 0 var(--c-lime);
  --shadow-ink:     var(--offset) var(--offset) 0 0 var(--c-ink);
  --shadow-magenta-sm: var(--offset-sm) var(--offset-sm) 0 0 var(--c-magenta);
  --shadow-ink-sm:     var(--offset-sm) var(--offset-sm) 0 0 var(--c-ink);
  /* Soft shadow, used sparingly for floating chrome (sticky nav) */
  --shadow-soft: 0 10px 30px -12px rgba(11, 11, 12, 0.28);

  /* --- Layout ------------------------------------------------------------- */
  --container:      72rem;
  --container-wide: 84rem;
  --container-text: 46rem;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* --- Motion ------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur:      190ms;

  /* --- Elevation of the sticky header ------------------------------------ */
  --z-header: 100;
}