/* ==========================================================================
   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=Syncopate:wght@400;700&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&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 green so the page reads as one material.            */

  --ground:      oklch(0.132 0.032 158);   /* deep bottle green, moodier   */
  --ground-deep: oklch(0.098 0.026 158);   /* recessed panels, film frames */
  --bone:        oklch(0.945 0.008 110);   /* text, faintly warm off-white */
  --bone-dim:    oklch(0.715 0.014 145);   /* secondary text               */
  --hair:        oklch(0.945 0.008 110 / .16);

  /* Measured against --ground: bone 14.8:1, bone-dim 6.4:1. Both pass AA.  */

  /* ------------------------------------------------------------------ type
     FOUR ROLES. Do not add a fifth.
       --font-display  Syncopate    logo lockup, h1, h2
       --font-text     EB Garamond  everything else
     No eyebrows, no kickers, no captions, no small-caps labels.           */

  --font-display: "Syncopate", "Arial Narrow", sans-serif;   /* logo + the one word */
  --font-label:   "IBM Plex Mono", ui-monospace, monospace;  /* every h2            */
  --font-text:    "EB Garamond", Georgia, serif;             /* everything else     */

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

  /* 2 · H1 — one per page. Syncopate is wide and letterspaced, so keep the
        copy to six or seven words or it wraps into a wall.                */
  --h1-size:     clamp(1.5rem, 3.6vw, 3.25rem);
  --h1-weight:   700;
  --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; }
}