/* ============================================================
   OLLAWA LAW OFFICES — DESIGN TOKENS
   System: "THE BRIEF" — legal docket meets film credits.
   Bone ground, oxblood ink, exposed 12-col grid, brutal grotesk.

   Calibrated against measured CSS from Krogerus, Sharplink,
   Terminal Industries, Column, Dragonfly, Gretel and Basement.
   ============================================================ */

:root {
  /* ---------- COLOR ----------------------------------------
     Brand oxblood #2E0014 sampled directly from the OLLAWA mark.
     Warm near-black, never #000. Warm bone, never #FFF.        */
  --ox-900: #17000C;   /* warm near-black, oxblood cast */
  --ox-800: #22000F;
  --ox-700: #2E0014;   /* ★ BRAND — sampled from the logo */
  --ox-600: #45061F;
  --ox-500: #5E122F;
  --ox-400: #7D2544;
  --ox-300: #A85570;
  --rose:   #A0777D;
  --alert:  #B3341F;   /* form errors only */   /* desaturated oxblood tint */

  --bone-100: #FDFBF7;  /* raised surface / paper */
  --bone-200: #F4EFE9;  /* page ground */
  --bone-300: #EAE2D8;  /* alternating band */
  --bone-400: #DCD3C7;  /* hairline rule */
  --bone-500: #A99E8E;   /* placeholder text */

  --grey-600: #6E645C;   /* AA on every bone ground (5.05:1) */
  --grey-700: #4A403C;

  /* alpha ladder — every scrim, hover wash and hairline derives
     from ONE hue, so nothing drifts */
  --ox-a5:  color-mix(in oklab, var(--ox-700) 5%,  transparent);
  --ox-a10: color-mix(in oklab, var(--ox-700) 10%, transparent);
  --ox-a15: color-mix(in oklab, var(--ox-700) 15%, transparent);
  --ox-a25: color-mix(in oklab, var(--ox-700) 25%, transparent);
  --ox-a40: color-mix(in oklab, var(--ox-700) 40%, transparent);
  --ox-a60: color-mix(in oklab, var(--ox-700) 60%, transparent);

  /* semantic */
  --bg:         var(--bone-200);
  --bg-raised:  var(--bone-100);
  --bg-band:    var(--bone-300);
  --bg-invert:  var(--ox-900);
  --ink:        var(--ox-900);
  --ink-soft:   var(--grey-700);
  --ink-mute:   var(--grey-600);
  --ink-invert: var(--bone-200);
  --brand:      var(--ox-700);
  --rule:       var(--ox-a15);
  --rule-soft:  var(--ox-a5);
  --rule-inv:   color-mix(in oklab, var(--bone-200) 18%, transparent);

  /* ---------- TYPE -----------------------------------------
     TWO WEIGHTS ONLY: 400 body / 600 display.
     Mono is the third register — labels, numerals, credits.    */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --w-body: 400;
  --w-disp: 600;

  /* fluid scale, every step reaching its max at a 1920px viewport */
  --step--1: clamp(13px, 12.4px + 0.19vw, 14px);   /* mono label   */
  --step-0:  clamp(16px, 15.5px + 0.16vw, 18px);   /* body         */
  --step-1:  clamp(19px, 18.2px + 0.25vw, 21px);   /* lead         */
  --step-2:  clamp(24px, 21.6px + 0.75vw, 32px);   /* h4           */
  --step-3:  clamp(30px, 25.5px + 1.41vw, 44px);   /* h3           */
  --step-4:  clamp(38px, 29.0px + 2.81vw, 68px);   /* h2           */
  --step-5:  clamp(48px, 32.0px + 5.00vw, 96px);   /* section open */
  --step-6:  clamp(64px, 30.0px + 10.6vw, 168px);  /* hero         */
  --step-7:  clamp(80px, 25.0px + 17.2vw, 256px);  /* statement    */
  --t-micro: 11px;

  /* TRACKING IS A CURVE, NOT A VALUE.
     Positive on small uppercase, zero on body, negative only
     above step-2, hard floor at -0.04em. */
  --tr--1:  0.08em;
  --tr-0:   0.005em;
  --tr-1:   0em;
  --tr-2:  -0.01em;
  --tr-3:  -0.02em;
  --tr-4:  -0.025em;
  --tr-5:  -0.03em;
  --tr-6:  -0.035em;
  --tr-7:  -0.04em;      /* floor — never tighter */
  --tr-wide:  0.18em;
  --tr-ultra: 0.32em;

  /* line-height inverts against size, crossing 1.0 only past ~80px */
  --lh--1: 1.4;  --lh-0: 1.6;  --lh-1: 1.45; --lh-2: 1.25;
  --lh-3:  1.15; --lh-4: 1.08; --lh-5: 1.0;  --lh-6: 0.94; --lh-7: 0.88;

  /* ---------- SPACE : base-4, section rhythm a multiple of 8 ---------- */
  --s-1:.25rem; --s-2:.5rem;  --s-3:.75rem; --s-4:1rem;   --s-5:1.5rem;
  --s-6:2rem;   --s-7:3rem;   --s-8:4rem;   --s-9:5.5rem; --s-10:8rem;
  --pad-section:    clamp(88px, 6.67vw, 128px);
  --pad-section-lg: clamp(128px, 10.4vw, 200px);
  --pad-hero:       clamp(96px, 8.3vw, 160px);

  /* ---------- GRID : tokenised, never hardcoded ---------- */
  --cols: 12;
  --gutter: 24px;
  --margin: 32px;
  --row-gap: 8px;
  --maxw: 1680px;
  --layout-w: min(100vw, var(--maxw));
  --col-w: calc((var(--layout-w) - (var(--margin) * 2)
            - ((var(--cols) - 1) * var(--gutter))) / var(--cols));
  --measure: 62ch;
  --measure-tight: 46ch;

  /* ---------- MOTION : ONE house curve, FIVE duration tiers ---------- */
  --ease:       cubic-bezier(0.33, 0, 0.20, 1);   /* house — 80% of everything */
  --ease-out:   cubic-bezier(0.16, 1, 0.30, 1);   /* expo-out — entrances */
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);   /* panels, wipes */

  --d-instant:   80ms;
  --d-micro:    160ms;
  --d-standard: 350ms;
  --d-reveal:   600ms;
  --d-deliberate: 850ms;
  --stagger: 60ms;

  --border-w: 1px;
}

@media (max-width:1000px){ :root{ --cols:6; --gutter:20px; --margin:24px } }
@media (max-width:640px) { :root{ --cols:4; --gutter:16px; --margin:16px } }

@media (prefers-reduced-motion: reduce) {
  :root { --d-instant:1ms; --d-micro:1ms; --d-standard:1ms;
          --d-reveal:1ms; --d-deliberate:1ms; --stagger:0ms }
}