/* ==========================================================================
   Spinta — design tokens
   Brand rule (Spinta Brand Assets/README): black #111111 on bone #F7F5F2,
   or white on black. No other brand colours. Imagery carries the colour.
   ========================================================================== */

:root {
  /* Colour */
  --ink: #111111;
  --ink-soft: #1b1b1b;
  --bone: #f7f5f2;
  --bone-deep: #efebe5;
  --white: #ffffff;
  --text: var(--ink);
  --text-mute: rgba(17, 17, 17, 0.58);
  --text-faint: rgba(17, 17, 17, 0.38);
  --line: rgba(17, 17, 17, 0.14);
  --on-ink: var(--bone);
  --on-ink-mute: rgba(247, 245, 242, 0.56);

  /* Type */
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wdth-display: 125%;
  --wdth-text: 100%;

  --fs-micro: 0.6875rem;   /* 11px — mono labels */
  --fs-small: 0.8125rem;   /* 13px — nav */
  --fs-body: clamp(0.9375rem, 0.86rem + 0.18vw, 1.0625rem); /* 15–17px */

  /* Space & layout */
  --gutter: clamp(20px, 2.3vw, 44px);        /* page edge for chrome (nav, foot); 20px on phones */
  --title-inset: clamp(20px, 5.4vw, 120px);  /* page edge for the giant type */
  --header-h: clamp(72px, 7.4vw, 112px);
  --header-compact: clamp(64px, 4.2vw, 80px); /* the frosted bar once scrolled (header.css) */

  /* Phones (max-width: 719px): one rhythm for every section's top and bottom, so
     each gap between two sections reads the same (about 165px on a 720px-tall
     screen); a closing section keeps a little more above the footer. */
  --sec-top: clamp(68px, 11vh, 84px);
  --sec-bot: clamp(72px, 12vh, 88px);
  --sec-end: clamp(88px, 14vh, 104px);

  /* Shadows: several soft layers, each wider and fainter than the last, so a
     shadow fades out smoothly and never ends in a visible edge. --shadow-lift
     floats a white card on the paper; --shadow-lift-up is the same card
     lifted (hover); --shadow-deep sits under ink and pictures. */
  --shadow-lift:
    0 1px 2px rgb(17 17 17 / 0.025),
    0 4px 8px -2px rgb(17 17 17 / 0.03),
    0 12px 24px -8px rgb(17 17 17 / 0.045),
    0 26px 48px -18px rgb(17 17 17 / 0.06),
    0 44px 80px -36px rgb(17 17 17 / 0.1);
  --shadow-lift-up:
    0 2px 4px rgb(17 17 17 / 0.025),
    0 8px 14px -4px rgb(17 17 17 / 0.035),
    0 20px 36px -12px rgb(17 17 17 / 0.05),
    0 38px 64px -24px rgb(17 17 17 / 0.07),
    0 60px 100px -44px rgb(17 17 17 / 0.12);
  --shadow-deep:
    0 2px 4px rgb(17 17 17 / 0.06),
    0 8px 16px -4px rgb(17 17 17 / 0.08),
    0 20px 36px -12px rgb(17 17 17 / 0.12),
    0 40px 70px -28px rgb(17 17 17 / 0.18);
  --shadow-deep-up:
    0 4px 8px rgb(17 17 17 / 0.06),
    0 14px 24px -6px rgb(17 17 17 / 0.08),
    0 30px 50px -16px rgb(17 17 17 / 0.12),
    0 56px 90px -36px rgb(17 17 17 / 0.2);

  /* Motion: strong curves (see the animate skill; never the weak built-ins) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-hover: 240ms;

  /* Intro geometry (read by scripts/modules/intro.js as well) */
  --intro-scale: 0.835;

  /* Layers */
  --z-intro-backdrop: 90;
  --z-page: 91;
  --z-intro-card: 92;
  --z-menu: 80;
  --z-enquiry: 85;
  --z-header: 20;
}