/* ==========================================================================
   Mickom design tokens
   Source of truth: Mickom_Brand_Guide.md
   Do not introduce colours or type sizes outside this file.
   Contrast ratios noted below are calculated against #FFFFFF. Per the Brand
   Guide, every real foreground/background pair must still be verified before
   design approval.
   ========================================================================== */

:root {
  /* --- Core palette ------------------------------------------------------ */
  --c-ink: #252C41;            /* Primary Ink.  13.7:1 on white. Body and headings. */
  --c-accent: #F1404B;         /* Accent Red.    3.8:1 on white. Rules, decorative
                                  marks and large display only. Never small text. */
  --c-action: #C2182A;         /* Action Red.    6.1:1 on white. Links, buttons and
                                  any interactive text at normal size. */
  --c-rule: #C9C9CE;           /* Neutral Rule. Decorative hairlines only. */
  --c-bg: #FFFFFF;             /* Background. */

  /* --- Derived neutrals -------------------------------------------------- */
  --c-ink-muted: #5B6178;      /* 6.1:1 on white. Secondary prose, captions. */
  --c-surface: #F6F6F8;        /* Quiet alternating section background. */
  --c-action-hover: #9E1322;
  --c-focus: #252C41;

  /* --- Typefaces --------------------------------------------------------- */
  /* Source Serif 4 carries the editorial voice. Inter does everything else. */
  --font-display: "Source Serif 4", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --fw-body: 400;
  --fw-body-medium: 500;
  --fw-body-strong: 600;
  --fw-display: 500;
  --fw-display-strong: 600;

  /* --- Type scale -------------------------------------------------------- */
  /* Fluid between a 360px and a 1280px viewport. */
  --fs-eyebrow: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: clamp(1.0625rem, 0.99rem + 0.31vw, 1.1875rem);
  --fs-lead: clamp(1.1875rem, 1.06rem + 0.55vw, 1.4375rem);
  --fs-h3: clamp(1.25rem, 1.12rem + 0.55vw, 1.5rem);
  --fs-h2: clamp(1.625rem, 1.35rem + 1.17vw, 2.25rem);
  --fs-h1: clamp(2.25rem, 1.62rem + 2.7vw, 3.75rem);

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;
  --lh-lead: 1.5;

  --ls-tight: -0.02em;
  --ls-eyebrow: 0.09em;

  /* --- Spacing ----------------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;

  /* Generous vertical rhythm between page sections, per the Brand Guide. */
  --sp-section: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* --- Layout ------------------------------------------------------------ */
  --measure: 68ch;             /* Prose line length. */
  --measure-narrow: 46ch;
  --container: 74rem;
  --container-pad: clamp(1.25rem, 0.6rem + 2.8vw, 3rem);

  /* --- Lines and shape --------------------------------------------------- */
  --border-hairline: 1px solid var(--c-rule);
  --border-accent: 2px solid var(--c-accent);
  --radius: 2px;               /* Documents have corners, not pills. */

  --focus-ring: 2px solid var(--c-focus);
  --focus-offset: 3px;

  --transition: 120ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}