/* ==========================================================================
   ANTIK STUDIOS — design tokens
   Four type roles. That is the whole system: logo, h1, h2, text.
   If something needs emphasis it changes size or colour, never role.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&display=swap");

:root{

  /* ---------------------------------------------------------------- colour
     OKLCH throughout. Nothing is pure black or pure white; every neutral is
     pulled toward the blue so the page reads as one material. Warm footage
     sits opposite blue on the wheel, which is why it lifts off this ground. */

  --ground:      oklch(0.108 0.038 264);   /* ink blue, reads black until  */
  --ground-deep: oklch(0.078 0.030 264);   /* recessed panels, film frames */
  --bone:        oklch(0.950 0.005 250);   /* off-white, faintly cool      */
  --bone-dim:    oklch(0.720 0.016 252);   /* secondary text               */
  --hair:        oklch(0.950 0.005 250 / .15);

  /* Measured against --ground: bone 16.3:1, bone-dim 7.9:1. Both pass AA.  */

  /* ------------------------------------------------------------------ type
     FOUR ROLES. Do not add a fifth.
       --font-display  Outfit       logo face, h1, statements
       --font-text     Outfit       everything else
     No eyebrows, no kickers, no captions, no small-caps labels.           */

  --font-display: "Outfit", sans-serif;      /* the logo face carries the site  */
  --font-label:   "IBM Plex Mono", ui-monospace, monospace;  /* every h2            */
  --font-text:    "Outfit", sans-serif;      /* one family, one material        */

  /* 1 · LOGO — the cut SVG lockup. Never set in live text.                */

  /* 2 · H1 — one per page. Outfit 800 is compact, so tracking does the width;
        copy to six or seven words or it wraps into a wall.                */
  --h1-size:     clamp(1.5rem, 3.6vw, 3.25rem);
  --h1-weight:   800;
  --h1-tracking: 0.10em;
  --h1-leading:  1.42;

  /* 3 · H2 — section and film titles.                                     */
  --h2-size:     clamp(1.0625rem, 1.7vw, 1.5rem);
  --h2-weight:   700;
  --h2-tracking: 0.12em;
  --h2-leading:  1.5;

  /* 4 · TEXT — one face, one weight, two sizes. Large for statements,
        base for paragraphs. Colour carries the rest.                      */
  --text-lg:      clamp(1.375rem, 2.1vw, 1.75rem);
  --text-base:    1.125rem;
  --text-leading: 1.55;

  /* ----------------------------------------------------------------- space */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem;
  --s5:3rem;  --s6:5rem; --s7:8rem;
  --measure:   62ch;
  --container: 88rem;
  --gutter:    clamp(1.25rem, 4vw, 3.5rem);

  /* ----------------------------------------------------------------- shape */
  --radius: 0;

  /* ---------------------------------------------------------------- motion */
  --ease: cubic-bezier(0.16, 0.84, 0.20, 1);
  --dur:  620ms;
}

@media (prefers-reduced-motion: reduce){
  :root{ --dur: 1ms; }
}