/* ============================================================================
   chciweb.online — design tokens
   The ONE home for every colour, size and rhythm value (INV-ONE-HOME applied to
   design). Nothing below this file hardcodes a hex, a font stack or a spacing
   number — if a value appears twice, one of them is a bug.

   Every foreground/background pair here is verified against WCAG 2.2 AA
   (4.5:1 body, 3:1 large) — measured, not eyeballed. Ratios in comments.
   ============================================================================ */

:root {
  /* ── Colour ──────────────────────────────────────────────────────────────
     Warm and human, with one confident accent. The warmth carries the brand
     (a small Czech business owner should feel spoken to by a person, not an
     agency); the teal is the "we know what we're doing" note, used sparingly
     on interactive things only. */

  --paper:            #FAF6F1;   /* page background — warm off-white, not clinical */
  --sand:             #F0E7DC;   /* raised surfaces: cards, pricing table rows   */
  --sand-deep:        #E5D8C9;   /* borders, rules, quiet dividers               */

  --ink:              #1C1917;   /* body text            — 16.25:1 on paper ✅   */
  --ink-muted:        #57504A;   /* secondary text       —  7.36:1 on paper ✅   */

  --terracotta:       #BE4A2F;   /* brand primary        —  4.64:1 on paper ✅   */
  --terracotta-deep:  #A33C24;   /* terracotta ON SAND — the plain terracotta is
                                    only 4.08:1 there, which is large-text-only.
                                    Use this one for any text on --sand.        */
  --terracotta-wash:  #F7E9E4;   /* tint for callouts, selected states           */

  --teal:             #0D6E6E;   /* interactive accent   —  5.62:1 on paper ✅   */
  --teal-deep:        #0B5C5C;   /* hover/active         —  7.23:1 on paper ✅   */

  --focus:            #0D6E6E;   /* focus ring — never removed, only restyled    */

  /* Semantic aliases. Components reference THESE, never the raw colours above,
     so a palette change is one edit here and not a search across templates. */
  --bg:               var(--paper);
  --bg-raised:        var(--sand);
  --text:             var(--ink);
  --text-muted:       var(--ink-muted);
  --brand:            var(--terracotta);
  --brand-on-raised:  var(--terracotta-deep);
  --link:             var(--teal);
  --link-hover:       var(--teal-deep);
  --rule:             var(--sand-deep);

  /* ── Type ────────────────────────────────────────────────────────────────
     Fraunces (self-hosted, latin-ext sliced so Czech diacritics render in the
     real face and not a fallback) for display. A system stack for body: zero
     bytes, no layout shift, and it already looks native on every Czech desktop.
     No Google Fonts — embedding them ships visitor IPs to a third country and
     would drag a cookie/consent question into a site designed to need none. */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Fluid scale. clamp() means no breakpoint jumps and no JS — the type just
     fits, from a 320px phone to a wide desktop. */
  --step--1: clamp(0.83rem, 0.80rem + 0.16vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1:  clamp(1.25rem, 1.15rem + 0.50vw, 1.55rem);
  --step-2:  clamp(1.56rem, 1.38rem + 0.90vw, 2.09rem);
  --step-3:  clamp(1.95rem, 1.64rem + 1.55vw, 2.81rem);
  --step-4:  clamp(2.44rem, 1.93rem + 2.55vw, 3.79rem);
  --step-5:  clamp(3.05rem, 2.24rem + 4.05vw, 5.11rem);

  --leading-tight: 1.1;
  --leading-snug:  1.3;
  --leading-body:  1.65;   /* generous — Czech runs long and diacritics need air */
  --measure:       62ch;   /* line length cap for readable prose */

  /* ── Space ───────────────────────────────────────────────────────────────
     One ratio, so vertical rhythm is consistent without anyone deciding. */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.25rem;
  /* 🚨 THE BIG STEPS ARE FLUID; THE SMALL ONES ARE NOT. Sub-rhythm spacing (gaps between a label
     and its field) should not move with the viewport — it is set by the type, and shrinking it on
     a phone makes a form feel cramped rather than roomy.

     Section rhythm is the opposite. A fixed 8rem is generous at 1440px and is 128px of NOTHING on
     a 390px phone — measured 2026-08-05, the homepage hero began ~180px down, so 21% of the first
     screen said nothing about what we sell. These now scale with the viewport, which reclaims that
     space on every section at once instead of special-casing the hero. */
  --space-xl:  clamp(2.00rem, 1.40rem + 3.0vw, 3.5rem);
  /* `F-124` — HALVED 2026-08-18, and this is the only place it had to happen.
     Maker, reviewing the deployed site: *"huge empty spaces that are forcing people to scroll,
     that makes zero sense in 2026."* `[V]` measured before the change, at 1280px: `--space-2xl`
     resolved to **86.4px**, and `.section` applies it top AND bottom, so every section boundary
     cost **172.8px** of nothing. The homepage was **6.6 screens** on desktop and **8.6** on a
     390px phone.
     The whole fix is these two clamps, because `.section`/`.hero` are the only consumers of the
     big end of the scale (7 + 2 uses, all padding). A per-section override would have been the
     quick fix and would have left the next section to rediscover it. */
  --space-2xl: clamp(1.75rem, 1.10rem + 2.4vw, 3.25rem);
  --space-3xl: clamp(2.25rem, 1.50rem + 3.0vw, 4.50rem);

  /* ── Form ────────────────────────────────────────────────────────────────
     Radii echo the logo mark's 16/64 corner (0.25 of the box) so buttons,
     cards and the mark visibly belong to the same family. */
  --radius-s:  0.375rem;
  --radius-m:  0.75rem;
  --radius-l:  1.25rem;
  --radius-xl: 2rem;

  --shadow-s: 0 1px 2px rgb(28 25 23 / 0.05), 0 1px 3px rgb(28 25 23 / 0.06);
  --shadow-m: 0 4px 10px rgb(28 25 23 / 0.06), 0 12px 28px rgb(28 25 23 / 0.07);

  --border:   1px solid var(--rule);
  /* Container: a max-width plus a gutter, NOT a calc() expression. The arithmetic form
     `min(72rem, 100% - 2*var(--space-m))` is valid in browsers but the W3C validator cannot
     resolve var() and rejects it as incompatible types — and SPEC C-23 requires zero errors.
     Padding-inline is simpler anyway and needs no math. */
  --content-max: 72rem;
  --gutter:      var(--space-m);

  /* ── Motion ──────────────────────────────────────────────────────────────
     Motion is an argument here, not decoration: it demonstrates the work we
     sell. But it is always additive — every animated thing is fully usable
     with motion off (see the reduced-motion block below). */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  120ms;
  --dur-base:  260ms;
  --dur-slow:  600ms;
}

/* 🚨 ACCESSIBILITY IS A DEFAULT, NOT A FEATURE (SPEC §17, WCAG 2.2 AA).
   Someone with vestibular disorder should get a site that is calm, not broken.
   Durations collapse to ~0 rather than animations being deleted, so anything
   that relies on a transition ending still fires its event. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-base: 1ms;
    --dur-slow: 1ms;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Respect a user who has forced high contrast at the OS level. */
@media (prefers-contrast: more) {
  :root {
    --ink-muted: #3A342F;
    --rule:      #B9A894;
  }
}