/* ============================================================
   Cazzaran v2 — Editorial Tokens
   Source of truth — do not hard-code colour, type, or spacing.
   ============================================================ */

/* Websafe / native font stacks — no web-font payload, no FOIT/FOUT, zero
   load latency. Display stack leads with Avenir Next + Helvetica Neue
   (the closest system-resident match to Raleway's geometric-humanist
   character) and degrades through Segoe UI to a generic sans. Mono stack
   uses each OS's bundled coding font. */

:root {
  /* ---------- Surface ---------- */
  --charcoal:        #141414;
  --ink:             #0A0A0A;
  --ink-soft:        #2A2A2A;
  --paper:           #FAFAF7;
  --paper-2:         #F2F2EE;
  --paper-rule:      #E5E5E5;
  --white:           #FFF;
  --muted:           #6B6B6B;
  --muted-dark:      #888;
  --muted-darker:    #555;

  /* ---------- Brand accent ---------- */
  --blue:            #1414E0;     /* deep royal blue — softened from #0000FF to kill vibration */
  --blue-text:       #1414CC;
  --blue-on-dark:    #5A7BFF;

  /* ---------- Type families ---------- */
  --font-display:    "Avenir Next", "Helvetica Neue", "Segoe UI", system-ui, -apple-system, blinkmacsystemfont, arial, sans-serif;
  --font-mono:       ui-monospace, "SF Mono", menlo, consolas, "Liberation Mono", monospace;

  /* ---------- Type scale ---------- */
  --fs-xs:           0.75rem;
  --fs-sm:           0.875rem;
  --fs-base:         1rem;
  --fs-md:           1.125rem;
  --fs-lg:           1.375rem;
  --fs-xl:           1.75rem;
  --fs-2xl:          2.25rem;
  --fs-3xl:          3rem;
  --fs-4xl:          clamp(2.75rem, 6vw, 4.5rem);
  --fs-5xl:          clamp(3.5rem, 9vw, 7rem);
  --fs-6xl:          clamp(4rem, 12vw, 9.5rem);
  --fs-7xl:          clamp(5rem, 18vw, 16rem);

  /* ---------- Weights ---------- */
  --fw-thin:         200;
  --fw-light:        300;
  --fw-regular:      400;
  --fw-medium:       500;
  --fw-semibold:     600;
  --fw-bold:         700;
  --fw-black:        800;

  /* ---------- Tracking ---------- */
  --tr-display:      -0.04em;
  --tr-tight:        -0.03em;
  --tr-snug:         -0.02em;
  --tr-normal:       0;
  --tr-mono:         0.05em;
  --tr-eyebrow:      0.18em;
  --tr-eyebrow-wide: 0.20em;

  /* ---------- Line heights ---------- */
  --lh-display:      0.9;
  --lh-tight:        1.0;
  --lh-snug:         1.2;
  --lh-normal:       1.45;
  --lh-relaxed:      1.6;

  /* ---------- Spacing ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;
  --space-48: 192px;

  /* ---------- Radii ---------- */
  --radius-0:  0px;
  --radius-1:  2px;
  --radius-2:  4px;
  --radius-pill: 999px;

  /* ---------- Borders ---------- */
  --border-hair:     1px solid var(--paper-rule);
  --border-strong:   2px solid var(--ink);

  /* ---------- Slash motif ----------
     Skew angle matches the brand logo SVG (atan(180/250) ≈ 36°). */
  --slash-skew:      -36deg;

  /* ---------- Motion ---------- */
  --ease-standard:   cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-emphasis:   cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:        120ms;
  --dur-base:        200ms;
  --dur-slow:        400ms;
  --dur-reveal:      900ms;

  /* ---------- Layout ---------- */
  --gutter:          clamp(20px, 4vw, 64px);
  --container-max:   1280px;
  --container-wide:  1440px;
  --measure:         62ch;

  /* ---------- Boilerplate compat aliases (legacy blocks read these) ---------- */
  --background-color: var(--paper);
  --light-color:      var(--paper-2);
  --dark-color:       var(--ink-soft);
  --text-color:       var(--ink);
  --link-color:       var(--blue-text);
  --link-hover-color: var(--blue);
  --body-font-family: var(--font-display);
  --heading-font-family: var(--font-display);
  --body-font-size-m: var(--fs-base);
  --body-font-size-s: var(--fs-sm);
  --body-font-size-xs: var(--fs-xs);
  --heading-font-size-xxl: var(--fs-5xl);
  --heading-font-size-xl:  var(--fs-4xl);
  --heading-font-size-l:   var(--fs-2xl);
  --heading-font-size-m:   var(--fs-xl);
  --heading-font-size-s:   var(--fs-lg);
  --heading-font-size-xs:  var(--fs-md);
  --nav-height: 72px;
}