/* ============================================================================
   THEME — white · "Pure white"
   P220 Phase 0 scaffold. Direction: true white field, near-black type, colour
   used ONLY where it must be (states, errors).

   ⚠ THIS THEME DEPARTS FROM THE BRAND BOOK — flag before it ships, not after.
   Linen #FDF5EB is one of four hexes in the brand book Róbert paid a designer
   for. Moving to true white is a legitimate client decision, but it is a
   DEPARTURE and it should carry Reni's name rather than arrive by drift.
   More whitespace is the brand book taken seriously (its own rule is 80%
   Linen+Jet / 20% Reseda+Old Rose); a different FIELD COLOUR is a different
   question. See BRIEF-4-versions.md §3 and themes.config.mjs.

   ⚠ COLLISION TO SOLVE IN PHASE 2 — the GINOP infoblokk. The clinic is
   EU-funded and the kedvezményezetti infoblokk is a legal duty: above the
   fold, no scrolling required. It is a wide, saturated blue-and-gold block
   whose proportions and colour are governed by the Arculati Kézikönyv and
   CANNOT be restyled. It collides hardest with exactly this theme. Design the
   slot so the block is contained rather than fought — a full-bleed band with
   its own field is likely the only honest answer on a white page.

   CONTRACT: see the header of premium-a.css. Enforced by
   scripts/check-theme-contract.mjs.
   ============================================================================ */

html[data-theme='white'] {
  /* --- Field ---------------------------------------------------------------
     True white. The surfaces separate by hairline and shadow, not by tone —
     there is almost no tonal room on a white page, so the structure has to
     come from line and space instead. */
  --color-bg: #ffffff;
  --color-surface: #f7f7f6; /* the only tonal step available */
  --color-surface-deep: #f2f2f0;
  --color-surface-deepest: #ebebe8;

  /* --- Ink -----------------------------------------------------------------
     Near-black, not black: #111 on #fff is 18.88:1, which is more than
     enough, and pure #000 on pure #fff is the one combination that reads as
     unconsidered rather than precise. */
  --color-text: #111111;
  --color-text-muted: #4a4a48;
  --color-text-subtle: #575754;

  --color-border: #e4e4e1; /* hairlines carry the structure here */
  --color-border-strong: #cfcfcb;

  /* --- Colour, rationed ----------------------------------------------------
     The direction's whole claim is that colour appears only where it MUST:
     states, errors, focus. The brand green survives as the primary because
     removing it entirely would stop being a design direction for THIS clinic
     and start being a generic white template — but it is deepened so it can
     carry text on white, and it stops decorating.

     Old Rose is the tone this direction gives up. On a white field it reads
     as decoration rather than as brand, which is precisely what `white` is
     arguing against — so accent collapses onto the primary hue. If Reni wants
     the rose back, that is a one-line change and a real conversation. */
  --color-primary: #5f6a52; /* Reseda deepened — carries text on white */
  --color-primary-deep: #4e5644;
  --color-primary-deepest: #3c4234;
  --color-accent: var(--color-primary);
  --color-accent-deep: var(--color-primary-deep);
  --color-accent-deepest: var(--color-primary-deepest);
  --color-primary-contrast: #ffffff; /* on white, the contrast tone IS white */

  --color-scrim: rgba(17, 17, 17, 0.82);

  /* Channel triplets — must track their hex twins. Without --color-bg-rgb the
     header wash keeps painting Linen at 92% over a white page, which is
     exactly how this whole token family got found: the `white` theme rendered
     with a warm band across the top and nothing in the CSS looked wrong. */
  --color-bg-rgb: 255 255 255; /* = --color-bg */
  --color-on-image-rgb: 255 255 255;
  --color-text-rgb: 17 17 17; /* = --color-text */
  --color-scrim-rgb: 17 17 17; /* neutral, matching the ink */
  /* A pure-white emboss lift is invisible on a white field. The blind emboss
     has to carry on shadow alone here — revisit in Phase 2, since vaknyomás is
     a named brand-book device and losing it entirely is a design decision, not
     a technical one. */
  --color-emboss-lift: rgba(255, 255, 255, 0);

  /* --- Type ----------------------------------------------------------------
     A white page shows every typographic decision, so the scale tightens and
     the display face loses its tracking flourish. */
  --font-size-h1: clamp(2.5rem, 4.8vw, 4.25rem); /* 40 → 68px */
  --font-size-h2: clamp(2rem, 3vw, 2.75rem); /* 32 → 44px */
  --line-height-display: 1.05;
  --line-height-body: 1.75;
  --tracking-display: 0em; /* none — on white, tracking reads as a mannerism */

  /* --- Space ---------------------------------------------------------------
     The most generous of the four. On a white field, space IS the design;
     there is no texture and almost no colour left to carry it. */
  --section-pad: clamp(4.5rem, 8.5vw, 8.5rem);
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --content-max: 70rem; /* 1120px — the narrowest measure in the set */

  --radius: 0px;
  --radius-lg: 0px;
}

/* ===========================================================================
   LAYOUT VARIANT — white · pure white
   Phase 2. On a white field there is no tone and almost no colour left to
   carry the page, so SPACE and TYPE have to do all of it. The first viewport
   becomes type-only; the imagery is demoted to a band beneath it. This is the
   most opinionated of the four and the furthest from the client's mockup —
   which is the point of having it in the set.
   =========================================================================== */

html[data-theme='white'] .hero {
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  min-height: 0;
}

/* No portrait in the first viewport at all. */
html[data-theme='white'] .hero__portrait {
  display: none;
}

html[data-theme='white'] .hero__copy {
  align-items: flex-start;
  padding: clamp(6rem, 15vh, 12rem) 0 clamp(4rem, 9vh, 8rem);
  overflow: visible;
}

/* Left-aligned on a narrow measure with a very large left margin — the
   asymmetry is the composition. Not centred: centring on white reads as a
   landing-page template, and this direction is arguing for editorial rigour. */
html[data-theme='white'] .hero__text {
  width: min(40rem, 100%);
  margin-left: clamp(var(--gutter), 12vw, 14rem);
  padding-right: var(--gutter);
}

html[data-theme='white'] .hero h1 {
  font-size: clamp(3rem, 6.6vw, 5.75rem);
  line-height: 1.03;
  letter-spacing: -0.01em;
  text-transform: none; /* uppercase on white reads as shouting at this size */
}

/* The rule under the headline is the only non-type element up here, so it
   earns its place by being precise rather than decorative. */
html[data-theme='white'] .hero .rule {
  width: 3.5rem;
  height: 1px;
  background: var(--color-text);
  opacity: 1;
}

/* Imagery demoted to a wide, shallow band below the fold line. */
html[data-theme='white'] .hero__scene {
  grid-column: 1;
  aspect-ratio: 24 / 7;
  min-height: 0;
}
html[data-theme='white'] .hero__scene .ph-photo {
  object-position: center 45%;
}

/* Structure comes from hairlines, since there is no tonal room. */
html[data-theme='white'] .card {
  border: 1px solid var(--color-border);
}
html[data-theme='white'] .statband {
  border-block: 1px solid var(--color-border);
}