/* HALA tokens.css — the one colour system (rebuilt 2026-07-14).
   Loaded LAST on every page so it is authoritative. Structure per spec:
   primitives (raw brand colours) -> semantic tokens (roles) -> back-compat
   aliases (old token names resolve to the canonical/themed values so existing
   components keep working while they migrate to the semantic names).

   Contrast (WCAG, measured on --surface-page #F5E9D5):
     espresso #1F1A14  14.4:1   terracotta #B25238  4.21:1 (large/UI only)
     terracotta-deep #8E3F2A 6.05:1 (AA text)   teal #2C5F7C 5.77:1 (AA text)
     text-muted rgba .62 4.57:1   border-control rgba .5 3.20:1 (non-text UI). */
:root{
  /* ---- primitives: raw brand colours, no role implied ---- */
  --espresso:#1F1A14;
  --terracotta:#B25238;
  --terracotta-deep:#8E3F2A;   /* one deep terracotta; collapses old #9E4429/#8E3F2A */
  --teal:#2C5F7C;              /* Greece accent */
  --cream-page:#F5E9D5;        /* base page cream */
  --cream-raised:#F4EFE6;      /* raised / off-white surface */
  --cream-sunk:#EFE0C6;        /* warm sunk section band (was --stone) */
  --ochre:#C9A24C;

  /* ---- semantic tokens: reference primitives, name the role ---- */
  --text-primary:var(--espresso);
  --text-muted:rgba(31,26,20,.62);
  --surface-page:var(--cream-page);
  --surface-raised:var(--cream-raised);
  --surface-sunk:var(--cream-sunk);
  --border-subtle:rgba(31,26,20,.12);   /* decorative hairline only */
  --border-control:rgba(31,26,20,.5);   /* form fields / interactive boundaries (>=3:1) */
  --accent:var(--terracotta);           /* THEMED — Italy / default */
  --accent-strong:var(--terracotta-deep);/* accent for small text / links / icons / controls (AA) */
  --focus-ring:var(--accent);
  --error:#A02015;

  /* ---- spacing: one 4-based scale (reserve --space-96 for chapter breaks, not components) ---- */
  --space-4:4px;   --space-8:8px;   --space-12:12px; --space-16:16px;
  --space-24:24px; --space-32:32px; --space-48:48px; --space-64:64px; --space-96:96px;
  /* one responsive gutter, used across editorial + functional pages */
  --gutter:clamp(20px,4.5vw,56px);

  /* ---- shape: one restrained panel radius; pills reserved for filters/toggles/status ---- */
  --radius-sm:2px;      /* chips, tags, inputs */
  --radius:3px;         /* the one panel / card radius */
  --radius-pill:999px;  /* pills — filters, toggles, status only */
  --radius-circle:50%;  /* avatars, dots */

  /* ---- motion: functional 120-180ms, editorial <=300ms; no languid movement ---- */
  --motion-fast:150ms;  /* functional controls (hover, toggles, feedback) */
  --motion-mid:300ms;   /* editorial / hero transitions — the ceiling */
  --ease:cubic-bezier(.2,.65,.3,1);

  /* ---- back-compat aliases: legacy names -> canonical/themed ---- */
  --g:var(--gutter);                    /* legacy gutter name -> one canonical gutter */
  --r:var(--radius);                    /* legacy radius name -> the one panel radius */
  --ink:var(--text-primary);
  --ink-80:rgba(31,26,20,.80);
  --ink-60:var(--text-muted);
  --ink-soft:#4A3F32;
  --ink-mute:var(--text-muted);
  --ink-38:rgba(31,26,20,.40);
  --paper:var(--surface-page);
  --plaster:var(--surface-page);
  --parchment:var(--surface-raised);
  --cream:var(--surface-raised);        /* legacy --cream meant the raised off-white */
  --stone:var(--surface-sunk);
  --hair:var(--border-subtle);
  --hair-soft:rgba(31,26,20,.07);
  --rule:var(--border-subtle);
  --terra:var(--accent);                /* legacy --terra drove functional accents (fills, CTAs) — theme it. Genuine brand-terracotta moments use --terracotta directly. */
  --terra-deep:var(--accent-strong);
  --tile:var(--accent);                 /* themed venue/leg accent */
  --tc:var(--accent-strong);            /* themed accent text (AA) */
  --country-accent:var(--accent);       /* themed */
}

/* ---- Greece theme: only the accent changes; text/surfaces stay warm ---- */
:root[data-country="greece"]{
  --accent:var(--teal);
  --accent-strong:var(--teal);          /* teal passes AA text (5.77:1), no separate deep needed */
}

/* a11y — inactive section-jump tabs: rgba .5 measured ~3.6:1 -> .62 = 4.5:1 */
.gt{color:rgba(31,26,20,.62)}
/* a11y — inactive filter-track options: rgba .6 ~4.3:1 -> .66 = 5.0:1 */
.hala-track .ct,.hala-track .do-tab,.hala-track .wp-tab{color:rgba(31,26,20,.66)}

/* universal themed focus ring — zero-specificity baseline so any interactive element
   without its own :focus-visible still gets a visible, country-themed ring. */
:where(a,button,input,textarea,select,summary,[tabindex]:not([tabindex="-1"])):focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:2px;
}

/* Readiness P0 — content must never depend on JS to become visible.
   Entrance reveals set opacity:0 until inline JS adds .in/.is-visible; with JS off
   the content stayed invisible. Show it immediately (also removes the languid
   fade-up/stagger motion the brief calls out). Loaded last + !important so it wins. */
.reveal,.reveal.in,.reveal.is-visible,
.reveal--stagger>*,.reveal--stagger.in>*,
.fade-up,.fade-in{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}

/* universal reduced-motion safety net — neutralises every animation/transition
   (incl. the slow hero zooms/rises) for users who ask for less motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}