/* M-Office design tokens.
 *
 * DESIGN.md is the intent. tokens.json is the machine-readable record. This file
 * is what the browser consumes. Change them in that order.
 * tools/checks.java asserts all three agree on every colour.
 *
 * FOUR colour blocks live in this file and must be edited together:
 *   1. :root                                            light theme
 *   2. @media (prefers-color-scheme: dark) :root        dark theme
 *   3. [data-ground="ink"]                              navy band inside light
 *   4. @media (...dark) [data-ground="ink"]             navy band inside dark
 * Editing one without the others is the defect the browser contrast checks catch.
 *
 * Ten colour tokens and only ten. Each carries its measured contrast.
 * The worst text pair on the site is accent-text on raised, at 4.51:1.
 */

/* Font filenames carry a version because /fonts/* is cached immutable for a
 * year. Bumping it means editing THREE places in one commit: this file,
 * tools/subset-fonts.py FACES, and the preload links in layouts/head.html. */
@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Source Sans 3";
  src: url("/fonts/source-sans-3-v1.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

html {
  /* Both schemes, chosen by the visitor's system. No toggle exists: persisting
   * one needs script, and the CSP admits none. */
  color-scheme: light dark;
}

:root {
  /* ---- colour: light theme, paper ground ------------------------------- */
  --page:         #F0EAE4;   /* ink 14.52  muted 4.98  accent-text 4.95 */
  --surface:      #F7F3EF;   /* ink 15.70  muted 5.38  accent-text 5.35 */
  --raised:       #E6E0DA;   /* ink 13.24  muted 4.54  accent-text 4.51 <- worst */
  --line:         #D3C9BE;
  --hairline:     #E2DAD1;
  --ink:          #011B36;
  --muted:        #4A6686;   /* desaturated navy, not neutral grey */
  --accent-fill:  #D09E6B;   /* ORNAMENT ONLY. 2.00 on page, 1.83 on raised. */
  --accent-text:  #7E5E3E;   /* the only accent permitted on type */
  --on-accent:    #011B36;   /* the only colour permitted on an accent-fill ground, 7.25 */

  /* ---- type ------------------------------------------------------------ */
  --font-display:   "Source Serif 4", Georgia, serif;
  --font-operating: "Source Sans 3", system-ui, -apple-system, sans-serif;

  --size-display:      clamp(2.35rem, 5.4vw, 4.25rem);
  --size-heading:      clamp(1.55rem, 3vw, 1.9375rem);
  --size-band-heading: clamp(1.3rem, 2.4vw, 1.625rem);
  --size-card-heading: 1rem;
  --size-lede:         1.0625rem;
  --size-body:         1.03125rem;
  --size-small:        0.875rem;
  --size-interface:    0.8125rem;
  --size-label:        0.6875rem;

  --leading-display: 1.06;
  --leading-heading: 1.2;
  --leading-band:    1.28;
  --leading-body:    1.65;
  --leading-tight:   1.4;

  --tracking-display: -0.015em;
  --tracking-heading: -0.008em;
  --tracking-label:    0.18em;
  --tracking-nav:      0.1em;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;

  /* ---- spacing ---------------------------------------------------------
   * A scale, not a set of one-offs. Not every step is used at any given time;
   * an unused step is a note, never a failure. */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  44px;
  --space-8:  60px;
  --space-9:  80px;
  --space-10: 104px;

  /* ---- shape ----------------------------------------------------------- */
  --radius-control: 2px;
  --radius-card:    3px;
  --border:         1px;
  --rule:           2px;
  --focus-ring:     2px;
  --focus-offset:   3px;
  --target-min:     44px;

  /* ---- motion ---------------------------------------------------------- */
  --duration: 120ms;

  /* ---- layout ---------------------------------------------------------- */
  --container:     72rem;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --measure:       34em;
  --measure-form:  30rem;
  --section-y:     clamp(3rem, 7vw, 5.5rem);
  --header-h:      4.75rem;
  --hero-y:        clamp(4rem, 9vw, 8rem);   /* the hero band is deeper than a section */

  /* ---- component measures ---------------------------------------------
   * These size one named element rather than a rhythm. They are still tokens,
   * because "no literal length in style.css" is only checkable when there are
   * no exceptions to argue about. */
  --disc:            2.75rem;   /* the gold icon disc on a service card */
  --wordmark-w:      11.5rem;
  --wordmark-w-sm:   9rem;
  --mark-lg:         7.5rem;    /* the large M. in the value band */
  --card-floor:      13rem;
  --step-n:          1.75rem;   /* the numeral column of the four steps */
  --hero-media:      42%;
  --offscreen:       -9999px;
}

/* ---- colour: dark theme ------------------------------------------------
 * Navy becomes the page. Hand-authored, never inverted. */
@media (prefers-color-scheme: dark) {
  :root {
    --page:        #011B36;   /* ink 14.52  muted 8.13  accent-text 8.52 */
    --surface:     #06253F;   /* ink 13.09  muted 7.32  accent-text 7.68 */
    --raised:      #0A2E4B;   /* ink 11.69  muted 6.54  accent-text 6.86 */
    --line:        #1B3D5E;
    --hairline:    #123252;
    --ink:         #F0EAE4;
    --muted:       #9DB4CD;
    --accent-fill: #D09E6B;
    --accent-text: #D9AE81;
    --on-accent:   #011B36;   /* still navy: paper on gold is 2.00 */
  }
}

/* ---- colour: the ink ground -------------------------------------------
 * A dark surface inside the light theme. The navigation bar and the value band.
 * Remaps the same ten names so one component ruleset serves every ground. */
[data-ground="ink"] {
  --page:        #011B36;   /* ink 14.52  muted 8.13  accent-text 7.25 */
  --surface:     #06253F;
  --raised:      #0A2E4B;
  --line:        #1B3D5E;
  --hairline:    #123252;
  --ink:         #F0EAE4;
  --muted:       #9DB4CD;
  --accent-fill: #D09E6B;
  --accent-text: #D09E6B;   /* the bright gold works here: 7.25 on navy */
  --on-accent:   #011B36;
}

/* ---- colour: the raised ground ---------------------------------------
 * The alternating band behind the service cards. Only --page moves: the band
 * sits one step off the page and everything drawn on it keeps the theme's own
 * inks. --raised is itself redefined per theme, so this one line covers both.
 * DESIGN.md promised this ground from the start; until now nothing drew it. */
[data-ground="raised"] {
  --page: var(--raised);
}

/* ---- colour: the ink ground, dark theme -------------------------------
 * Navy is already the page here, so the band RISES to the next surface rather
 * than inverting. A band that stayed #011B36 would be invisible. */
@media (prefers-color-scheme: dark) {
  [data-ground="ink"] {
    --page:        #06253F;   /* ink 13.09  muted 7.32  accent-text 7.68 */
    --surface:     #0A2E4B;
    --raised:      #0F3757;
    --line:        #1B3D5E;
    --hairline:    #123252;
    --ink:         #F0EAE4;
    --muted:       #9DB4CD;
    --accent-fill: #D09E6B;
    --accent-text: #D9AE81;
    --on-accent:   #011B36;
  }
}

/* One responsive token override. Body size deliberately does NOT drop: the
 * visitor reading this on a phone is the one deciding whether to enquire. */
@media (max-width: 40rem) {
  :root {
    --header-h: 3.75rem;
  }
}