/* =========================================================
   AZOTH — design tokens
   Colour, type, spacing, motion and layer values as custom
   properties. Nothing here renders anything by itself.
   ========================================================= */

:root {
  /* ---- colour --------------------------------------------------- */
  --ink: #17120f;          /* primary ground, warm black-brown */
  --ink-raised: #1f1712;   /* one step up from ink, for panels on ink */
  --wax: #6e1319;          /* oxblood — full-bleed plates, buttons */
  --wax-bright: #8e1b22;   /* hover / lit edge of wax */
  --wax-deep: #4a0d11;     /* pressed / active edge of wax */
  --parchment: #e8dfce;    /* inset paper panels, long-form reading */
  --parchment-raised: #f1ead0; /* paper one shade lighter, cards on parchment */
  --gilt: #b08d49;         /* tarnished gold — rules, small caps only */
  --gilt-dim: #8a6e3a;     /* gilt at lower emphasis, e.g. disabled rules */
  --slate: #5b6670;        /* cold grey — captions, metadata */

  /* text-on-ground pairings, resolved once so components never
     hardcode a raw colour against a ground they don't control */
  --text-on-ink: #ede6d8;
  --text-on-ink-dim: #b9ada0;
  --text-on-wax: #f3e9d8;
  --text-on-parchment: #221a14;
  /* --slate at body-text size on parchment is 4.44:1, just under the
     4.5:1 floor the brief also requires. Darkened here rather than
     touching --slate itself, which the brief pins to an exact value. */
  --text-on-parchment-dim: #4c565d;

  /* ---- type families --------------------------------------------- */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Instrument Sans', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* ---- type scale — mobile-first base (375px) --------------------
     Display steps go genuinely large only from 1024px up; see the
     breakpoint block below. Body sits inside the 17–18px floor and
     never leaves it. */
  --fs-display: 2.75rem;     /* hero headline, mobile */
  --fs-h1: 2rem;             /* section titles */
  --fs-h2: 1.375rem;         /* sub-heads within a section */
  --fs-body: 1.0625rem;      /* 17px */
  --fs-body-lg: 1.125rem;    /* 18px, used for the hero lede */
  --fs-small: 0.875rem;      /* captions, labels */
  --fs-mono: 0.9375rem;      /* data rows */
  --fs-mono-lg: 1.5rem;      /* emphasised ledger figures */

  --lh-display: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --lh-mono: 1.4;

  --ls-display: -0.01em;
  --ls-caps: 0.09em;         /* small-caps / gilt labels */
  --ls-mono: 0.02em;

  --measure: 68ch;           /* long-form reading width cap */

  /* ---- spacing — 4px base unit ------------------------------------ */
  --space-1: 0.25rem;   /* 4px */
  --space-2: 0.5rem;    /* 8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.5rem;    /* 24px */
  --space-6: 2rem;      /* 32px */
  --space-7: 3rem;      /* 48px */
  --space-8: 4rem;      /* 64px */
  --space-9: 6rem;      /* 96px */
  --space-10: 8rem;     /* 128px */

  /* section vertical rhythm — overridden per breakpoint below,
     read by a single rule (.section) so specificity never fights
     itself between section and element padding */
  --section-py: var(--space-8);
  --section-px: var(--space-5);
  --content-max: 76rem;

  /* ---- motion ------------------------------------------------------ */
  --ease-weighted: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-micro: 180ms;   /* hover/press feedback — stays snappy */
  --duration-reveal: 500ms;
  --duration-reveal-fast: 400ms;
  --duration-reveal-slow: 600ms;
  --reveal-distance: 1rem;   /* 16px rise */
  --stagger-step: 60ms;

  /* ---- structure ----------------------------------------------------- */
  --hairline: 1px;
  --focus-ring: 2px solid var(--gilt);
  --focus-ring-offset: 3px;

  /* ---- layers -------------------------------------------------------- */
  --z-grain: 1;
  --z-content: 2;
  --z-seal-mark: 40;
  --z-seal-press: 100;
}

/* Tablet — 768px */
@media (min-width: 48em) {
  :root {
    --fs-display: 4rem;
    --fs-h1: 2.5rem;
    --fs-h2: 1.625rem;
    --section-py: var(--space-9);
    --section-px: var(--space-7);
  }
}

/* Desktop — 1024px */
@media (min-width: 64em) {
  :root {
    --fs-display: 5.75rem;   /* clears the 88px floor */
    --fs-h1: 3rem;
    --fs-h2: 1.875rem;
    --fs-body-lg: 1.125rem;
    --section-py: var(--space-10);
    --section-px: var(--space-9);
  }
}

/* Wide — 1440px */
@media (min-width: 90em) {
  :root {
    --fs-display: 6.5rem;
    --content-max: 84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-micro: 1ms;
    --duration-reveal: 1ms;
    --duration-reveal-fast: 1ms;
    --duration-reveal-slow: 1ms;
    --stagger-step: 0ms;
    --reveal-distance: 0px;
  }
}