/* ===========================================================
   Agenz - design tokens

   Rules this system enforces:
   · 0px radius everywhere. No pills, no rounded cards.
   · The gradient appears ONCE per page. Elsewhere: flat colour.
   · No mid-greys for body copy. Bone on dark, near-black on colour.
   · Extreme scale only - 11px or 120px, nothing comfortable between.
   =========================================================== */

:root {
  /* ---- type scale: deliberately gapped ----
     There is no "medium" size. That gap is the look. */
  --micro: 11px;                                    /* labels, nav, meta */
  --small: clamp(0.86rem, 0.82rem + 0.2vw, 0.98rem);/* body copy only */
  --lead:  clamp(1.15rem, 1.0rem + 0.7vw, 1.6rem);  /* section leads */
  --big:   84px;                                     /* connect headline, fixed */
  --headline: clamp(2.6rem, 4.4vw, 4.6rem);         /* service + statement */
  --huge:  clamp(4.5rem, 1.5rem + 14vw, 16rem);     /* display / numerals */

  /* ---- spacing ---- */
  --sp-1: 0.5rem;  --sp-2: 1rem;   --sp-3: 1.75rem;
  --sp-4: 3rem;    --sp-5: 5.5rem; --sp-6: 9rem;
  --gutter: clamp(20px, 4.5vw, 76px);

  /* ---- motion: one idiom, clip-reveal from below ---- */
  --ease:      cubic-bezier(0.65, 0, 0.35, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 180ms;
  --dur-ui:    380ms;
  --dur-wipe:  820ms;

  /* ---- three faces, three roles. No face ever does another's job. ----
     VOICE   Clash Display  headlines everywhere (services, philosophy, connect)
     POSTER  Bebas Neue     hero lines and big numerals only. A signature.
     UTILITY Inter          labels, chips, nav, body, forms. Never above 16px. */
  --font-display: 'Clash Display', 'Archivo', sans-serif;   /* voice   */
  --font-poster:  'Bebas Neue', 'Oswald', sans-serif;       /* poster  */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --display-weight: 600;          /* Clash headline weight        */
  --poster-weight:  400;          /* Bebas ships one weight       */

  --tracking-display: -0.022em;   /* Clash is wide; tighten it     */
  --tracking-poster:   0.03em;    /* Bebas wants a little air      */
  --tracking-numeral: -0.02em;    /* giant numerals, as on agenz.in*/
  --tracking-label:    0.22em;    /* Inter caps                    */
  --tracking-accent:   0.22em;    /* rotator only, matched to live */
}

/* ===========================================================
   PALETTES
   =========================================================== */

/* Paper is the standard; :root carries it so a no-JS load is still white. */
:root {
  --bg: #FFFFFF; --bg-2: #F4F2EE; --fg: #07060D;
  --fg-mute: rgba(7, 6, 13, 0.64); --fg-faint: rgba(7, 6, 13, 0.42);
  --rule: rgba(7, 6, 13, 0.14); --on-flat: #07060D;
}

/* Ink - violet-cast near-black, taken from agenz.in */
html[data-theme="ink"] {
  --bg:       #07060D;
  --bg-2:     #0E0C16;
  --fg:       #F2EFE9;
  --fg-mute:  rgba(242, 239, 233, 0.58);
  --fg-faint: rgba(242, 239, 233, 0.34);
  --rule:     rgba(242, 239, 233, 0.16);
  --on-flat:  #07060D;            /* type colour when sitting on a flat fill */
}

/* Paper - the default. True white ground, near-black type. */
html[data-theme="bone"] {
  --bg:       #FFFFFF;
  --bg-2:     #F4F2EE;
  --fg:       #07060D;
  --fg-mute:  rgba(7, 6, 13, 0.64);
  --fg-faint: rgba(7, 6, 13, 0.42);
  --rule:     rgba(7, 6, 13, 0.14);
  --on-flat:  #07060D;
}

/* ---- the accent is the logo gradient, sampled off the artwork ----
   Stops taken from the "genz" wordmark left to right, so every accent
   on the site is literally the same ramp as the mark. */
:root {
  --gradient: linear-gradient(96deg,
    #FE6B54 0%, #FF4B5A 20%, #FF295E 40%, #D91C69 60%, #682478 80%, #3B107A 100%);

  /* single-colour fallbacks, pulled from the same ramp */
  --accent:      #FF295E;   /* mid stop, for 1px rules and carets */
  --accent-warm: #FE6B54;   /* first stop  */
  --accent-deep: #3B107A;   /* last stop   */

  /* per-stage hues in the morph section, spaced along the ramp */
  --films:  #FE6B54;
  --social: #FF295E;
  --design: #682478;
}

/* ---- prototype control: rotator face ---- */
html[data-display="bebas"] { --font-rotator: var(--font-poster); }

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