/* =========================================================================
   Merima Pašalić — EMDR psihoterapija · design tokens

   Chain: DESIGN.md (intent) -> tokens.json (DTCG) -> this file (what the browser
   consumes). Change them in that order. `java tools/checks.java` asserts all three
   agree on every colour token, in both themes and on both grounds.

   Nothing anywhere else in this codebase may contain a colour, size, or spacing
   literal that is not defined here. style.css consumes tokens only.

   THEMES. Light is the identity. Dark is a courtesy to people reading late at
   night and answers `prefers-color-scheme` ONLY — there is deliberately no
   toggle, no control, and no persisted choice, so there is also no script and no
   cookie. See DESIGN.md, "Dark".

   GROUNDS. Three: the default page ground, and two overrides selected with
   `data-ground` on a section. `raised` is the alternating band. `ink` is the
   full-bleed dark surface used by the closing band and the footer, and it works
   by REMAPPING THE SAME TEN TOKEN NAMES rather than by adding a second set of
   component rules — so identical markup renders correctly on either ground. This
   is the one mechanism in the file that repays reading twice.
   ========================================================================= */

/* ---- self-hosted faces, subset, no third-party origin ----
   Under GDPR an inference that someone is seeking psychotherapy is
   special-category data, and a Google Fonts request would hand the URL to a third
   party on every page view. That is the same problem as an analytics script, so
   the faces are cut by tools/subset-fonts.py and served from this origin.

   Filenames carry -v2 because _headers caches /fonts/* immutable for a year. A
   re-cut under the same name never reaches a returning visitor and produces no
   error anywhere; bump the suffix here AND in layouts/head.html when re-cutting. */

@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/young-serif-v2.woff2') format('woff2');
}

/* Newsreader keeps BOTH axes the handoff specifies: opsz 6–72 and wght 400–500.
   The optical-size axis is the reason a 40px display line is not simply a scaled-up
   18px body — stroke contrast and spacing are redrawn per size — and font-optical-sizing
   is `auto` by default, so the browser drives it from the used font-size with no work
   here. Flattening it to one instance would save ~40 kB and change the typeface. */
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/newsreader-v2.woff2') format('woff2');
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/newsreader-italic-v2.woff2') format('woff2');
  /* A real cursive italic from the italic file. Declaring it is what stops the browser
     synthesising an oblique, which looks cheap at body size — and the voice here is first
     person and leans on emphasis. */
}

@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/public-sans-v2.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/public-sans-italic-v2.woff2') format('woff2');
}

html {
  color-scheme: light dark;
}

/* =========================================================================
   LIGHT — the identity
   ========================================================================= */

:root {
  /* ---- the ten colour tokens ---- */
  --page:        #F4EFE9;  /* page background, nothing else */
  --surface:     #FBF8F4;  /* cards, header bar, form fields */
  --raised:      #EDE6DD;  /* crisis note, answer box, alternating bands */
  --line:        #DFD5C9;  /* borders and section rules */
  --hairline:    #C3B8A6;  /* list markers, inline separators, logo rule */
  --ink:         #26211D;  /* all headings and body copy — 13.9:1 on page, AAA */
  --muted:       #6B6055;  /* captions, labels, secondary lines — 5.4:1 */
  --accent-fill: #D4785A;  /* FILLS ONLY — 15px type here lands at 2.8:1 */
  --accent-text: #A8492C;  /* TYPE ONLY — links, eyebrows. 5.0:1 on page */
  --on-accent:   #26211D;  /* text on --accent-fill — 5.0:1 */

  /* ---- type ---- */
  --font-wordmark:  'Young Serif', Georgia, serif;
  --font-reading:   'Newsreader', Georgia, serif;
  --font-operating: 'Public Sans', system-ui, sans-serif;

  /* Eight steps in two bands. Reading sizes are never used for interface and
     interface sizes are never used for reading — that split IS the discipline. */

  /* reading — Newsreader, all five at weight 400 */
  --size-display:      2.5rem;     /* 40px — 30px on mobile, below */
  --size-heading:      1.875rem;   /* 30px */
  --size-card-heading: 1.5rem;     /* 24px */
  --size-subhead:      1.3125rem;  /* 21px */
  --size-body:         1.125rem;   /* 18px — fixed, never fluid, every device */

  /* operating — Public Sans */
  --size-small:     0.96875rem;  /* 15.5px */
  --size-interface: 0.875rem;    /* 14px */
  --size-label:     0.75rem;     /* 12px */

  --leading-display:      1.14;
  --leading-heading:      1.2;
  --leading-card-heading: 1.25;
  --leading-subhead:      1.3;
  --leading-body:         1.65;
  --leading-small:        1.55;
  --leading-interface:    1.5;

  --tracking-display: -0.015em;
  --tracking-label:    0.14em;
  --tracking-wordmark: -0.005em;
  --tracking-descriptor: 0.22em;

  --weight-reading:   400;
  --weight-small:     400;
  --weight-interface: 500;
  --weight-label:     600;

  /* ---- shape ---- */
  --radius-control: 2px;   /* buttons, inputs */
  --radius-card:    4px;   /* cards, images */
  --border:         1px;   /* one weight on the whole site; there is no second */
  --shadow:         none;  /* nowhere, ever — separation is done with rules */
  --focus-ring:     2px solid var(--ink);
  --focus-offset:   3px;
  --target-min:     44px;

  /* ---- motion ----
     Opacity and colour only. Nothing that moves an element, and never anything
     that oscillates left-to-right: an animated bilateral device mimics the
     clinical intervention outside a clinical setting, and rhythmic motion is a
     genuine problem for hypervigilant readers. */
  --duration: 120ms;

  /* ---- layout — README §3.6, stated exactly ---- */
  --container:     1140px;
  --container-pad: clamp(1.5rem, 3.4vw, 2.5rem);  /* 40px desktop, 24px mobile */
  --section-y:     clamp(3rem, 5.6vw, 4.75rem);   /* 76px desktop, 48px mobile */
  --rule-above:    2.75rem;   /* 44px */
  --rule-below:    1.625rem;  /* 26px */
  --gap-hero:      4rem;      /* 64px */
  --gap-split:     3.5rem;    /* 56px */
  --gap-cards:     1rem;      /* 16px */
  --card-floor:    360px;     /* do not lower — see DESIGN.md, "The condition grid" */
  --measure:       34em;      /* body copy measure. em, never px */

  /* Component measures. These size ONE named thing rather than a rhythm, so they are not
     on the spacing scale — but they are still tokens, because "no literal in style.css"
     is only checkable if there are no exceptions to argue about. */
  --menu-row:        52px;      /* mobile sheet row — stated in the handoff */
  --step-aside:      150px;     /* the step sequence's right-hand column */
  --slot-portrait:   420px;     /* the hero portrait's height */
  --slot-room:       380px;     /* the room photograph's height */
  --slot-wide:       260px;
  --wordmark:        1.1875rem;   /* 19px — the header lockup */
  --wordmark-desc:   0.46875rem;  /* 7.5px */
  --wordmark-sm:     0.96875rem;  /* 15.5px — the minimum, used in the footer */
  --wordmark-desc-sm: 0.40625rem; /* 6.5px */
  --measure-step:    38em;      /* a step's description, slightly wider than body */
  --measure-form:    30rem;     /* the contact form column */
  --measure-note:    22em;      /* the footer's crisis note */
  --card-padding:    22px 24px 24px;  /* stated in the design, not on the scale */
  --col-aside:       320px;     /* the narrow column of the aside/figure split */
  --offscreen:       -9999px;   /* the honeypot, parked outside the viewport */

  /* ---- spacing — ten steps, for what §3.6 does not state ---- */
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.25rem;  /* 20px */
  --space-6:   1.5rem;   /* 24px */
  --space-7:   2rem;     /* 32px */
  --space-8:   2.5rem;   /* 40px */
  --space-9:   3.5rem;   /* 56px */
  --space-10:  4.5rem;   /* 72px */
}

/* Display drops to 30px on mobile; body deliberately does NOT drop — 18px on every
   breakpoint is a clinical accessibility requirement, not a preference. */
@media (max-width: 40rem) {
  :root {
    --size-display: 1.875rem;  /* 30px */
  }
}

/* =========================================================================
   DARK — authored, not inverted. prefers-color-scheme only; no toggle.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --page:        #1C1917;
    --surface:     #241F1A;
    --raised:      #2C2723;
    --line:        #3A332C;
    --hairline:    #55483C;
    --ink:         #EFE7DC;  /* 14.3:1 on page, AAA */
    --muted:       #A79C90;  /* 6.5:1 */
    --accent-fill: #E39472;  /* 7.3:1 with ink on top */
    --accent-text: #E39472;  /* 7.3:1 — on dark the two accents converge */
    --on-accent:   #1C1917;
  }
}

/* =========================================================================
   GROUNDS

   `data-ground="raised"`  the alternating band. Only the page colour moves; a
                           card inside it still needs to sit a step above, so
                           --surface stays where it is.

   `data-ground="ink"`     the closing band and the footer. A full-bleed dark
                           surface INSIDE the light theme, expressed as a remap
                           of the same ten names so identical markup works on
                           either ground.

   Two derivations worth knowing before editing:

   · --accent-text becomes #E39472 on ink, NOT #A8492C. The light accent-text on
     #26211D measures ~1.6:1 and is unreadable. This is the palette's own "every
     accent is a pair" rule applied within one theme instead of between two.
     --accent-fill stays #D4785A: a fill carries ink on top and has no problem.

   · On the dark theme the ink ground RISES rather than inverting. The page is
     already #1C1917, so going darker disappears; landing on --raised would
     collapse the closing band into the alternating bands and cost the page a
     ground. It rises to --surface with a --line border, which is exactly what
     the handover's own footer component shows.
   ========================================================================= */

[data-ground="raised"] {
  --page: var(--raised);
}

[data-ground="ink"] {
  --page:        #26211D;
  --surface:     #332C26;
  --raised:      #332C26;
  --line:        #4A423A;
  --hairline:    #6B6055;  /* the wordmark divider lifts; #C3B8A6 disappears on ink */
  --ink:         #F4EFE9;
  --muted:       #A79C90;
  --accent-fill: #D4785A;
  --accent-text: #E39472;
  --on-accent:   #26211D;
}

@media (prefers-color-scheme: dark) {
  [data-ground="ink"] {
    --page:        #241F1A;
    --surface:     #2C2723;
    --raised:      #2C2723;
    --line:        #3A332C;
    --hairline:    #55483C;
    --ink:         #EFE7DC;
    --muted:       #A79C90;
    --accent-fill: #E39472;
    --accent-text: #E39472;
    --on-accent:   #1C1917;
  }
}

/* =========================================================================
   MOTION — off entirely under prefers-reduced-motion.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}