/* ============================================================================
   ATLAS WILD EXPERIENCES — token contract
   ----------------------------------------------------------------------------
   BE CURIOUS ✦ BE CONNECTED ✦ BE IN AWE

   The single source of truth for the brand's values. Paste this whole :root
   block into any page's first <style> before writing component CSS; every
   var(--*) used by the components in kit/components.html resolves from here.

   EVERY COLOUR BELOW COMES FROM ONE OF TWO PLACES
     · the eight hexes printed on page 2 of the client's brand cheat sheet
       (vendored at brand-kit/Atlas-Brand-CheatSheet.pdf), or
     · derive_tokens.py, which moves one of those eight along OKLab lightness
       until it meets WCAG AA on the ground it will actually sit on.
   Nothing is eyeballed. Run `python derive_tokens.py --check` to re-verify all
   36 pairings; it is a build gate.

   Tier map (see design_system_management SKILL.md §3):
     A1-identity   8   the brand — no fallback can substitute
     A1-structure 18   type scale, rhythm, container
     A2           26   defaultable, but declared here so nothing resolves empty
     B-slot        4   richer tier, aliased or independently bound
     C-extension  --awe-*  private to this brand

   FOUR GROUNDS, ONE CONTRACT
   The kit is not a palette with an accent — it is a set of flat colour fields
   butted against each other, and its own artwork is composed that way (page 1
   is six blocks of solid colour sharing hard edges). So this system gives you
   four grounds and rebinds the identity tokens on each. No component CSS
   changes between them:

     (default)                cream  #f4e7ce   long-form reading
     data-surface="forest"    forest #2c3c1a   chrome, ticker, footer
     data-surface="night"     black  #000000   galleries, photograph-forward
     data-surface="sand"      sand   #ffdd9d   call-to-action bands

   THE ONE RULE THAT IS EASY TO GET WRONG
   Orange #dd7d36 is the brand's loudest colour and reads 2.43:1 on cream —
   below even the large-text floor. It is a FILL in this system: button
   grounds, rules, the pattern. It is never text on a light ground. Links on
   light take rust #8c3900 (6.36:1); links on forest stay cream and carry an
   orange underline, so the brand colour is in the link without being asked to
   carry the legibility.
   ========================================================================== */

:root {

  /* ── A1-identity ─────────────────────────────────────────────────────────
     Declaration order matters: the workspace hub reads the first six colour
     values as this system's swatch row. */
  --bg: #f4e7ce;                 /* Cream  — the page                        */
  --surface: #ffffff;            /* White  — raised panels                   */
  --fg: #2c3c1a;                 /* Forest — ink, 9.71:1                     */
  --muted: #676b4d;              /* derived — captions, 4.53:1               */
  --border: #cbc3a9;             /* derived — rules and dividers             */
  --accent: #8c3900;             /* Rust   — links and emphasis, 6.36:1      */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --font-body: "Afacad Flux", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  /* ── B-slot ──────────────────────────────────────────────────────────── */
  --surface-warm: #ffdd9d;       /* Sand — one step warmer than the page     */
  --fg-2: #5b6545;               /* derived — de-emphasised body, 5.06:1     */
  --meta: var(--muted);          /* aliased                                  */
  --border-soft: #dfd6ba;        /* derived — hairline inside a panel        */

  /* ── A2 · accent states ──────────────────────────────────────────────── */
  --accent-on: #ffffff;          /* white on rust = 7.78:1                   */
  --accent-hover: color-mix(in oklab, var(--accent), black 16%);
  --accent-active: color-mix(in oklab, var(--accent), black 28%);

  /* ── A2 · semantic status ─────────────────────────────────────────────
     A second channel only. The palette is entirely warm, so `danger` lands on
     the same rust as `--accent` here; availability is told apart by SHAPE
     first (see .tk-dot) and colour second. Never encode a state in hue alone
     in this brand. */
  --success: #687532;            /* Moss   — seats open                      */
  --warn: #cb6c21;               /* derived orange — filling up              */
  --danger: #8c3900;             /* Rust   — last places / sold out          */

  /* ── A2 · type ───────────────────────────────────────────────────────────
     THE DATA VOICE IS NOT MONOSPACE HERE.
     The kit supplies two faces and no monospace, and it does not need one:
     Afacad Flux ships `tnum` and `zero`, so the same face sets running text
     and every figure that has to line up in a column. `--font-data` is what
     the logbook, the ticker, captions and labels use.

     `--font-mono` still exists because the token schema requires it, and it
     is a real system stack rather than an alias of the data face — if actual
     code ever appears on this site it needs monospace metrics, and quietly
     pointing the slot at a proportional face would be a lie the schema check
     cannot see. It costs nothing: no webfont is loaded for it. */
  --font-data: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── A2 · space (4px base) ───────────────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;

  /* ── A2 · radius — the lockup is an oval; everything else is cut ─────── */
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --radius-pill: 9999px;         /* the availability dot only                */

  /* ── A2 · elevation — rules, not shadows ─────────────────────────────── */
  --elev-flat: none;
  --elev-ring: 0 0 0 1px var(--border);
  --elev-raised: 0 0 0 1px var(--border);
  --focus-ring: 0 0 0 3px color-mix(in oklab, var(--accent), transparent 62%);

  /* ── A2 · motion ─────────────────────────────────────────────────────── */
  --motion-fast: 160ms;
  --motion-base: 240ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ── A1-structure · type scale ───────────────────────────────────────────
     Afacad Flux runs small for its point size, so the body floor is 18px and
     the lede sits at 21px. Playfair is high-contrast and wants air: every
     display size below is paired with --leading-tight, never the body
     leading. */
  --text-xs: 12px;               /* letterspaced labels, captions            */
  --text-sm: 14px;               /* data rows                                */
  --text-base: 18px;             /* body — the floor, never go under         */
  --text-lg: 21px;               /* lede                                     */
  --text-xl: 25px;               /* card titles                              */
  --text-2xl: 32px;              /* sub-headings                             */
  --text-3xl: 44px;              /* section headings                         */
  --text-4xl: 72px;              /* page titles                              */
  --leading-body: 1.6;
  --leading-tight: 1.08;
  --tracking-display: -0.008em;  /* Playfair is already tight; barely pull   */

  /* ── A1-structure · rhythm and container ─────────────────────────────── */
  --section-y-desktop: 96px;
  --section-y-tablet: 72px;
  --section-y-phone: 56px;
  --container-max: 1120px;
  --container-gutter-desktop: 40px;
  --container-gutter-tablet: 32px;
  --container-gutter-phone: 24px;

  /* ── C-extension · the named palette ─────────────────────────────────────
     The eight, verbatim from the cheat sheet. These are the ONLY colours that
     may be named in the brand's voice; anything else is a derived role above. */
  --awe-black: #000000;
  --awe-forest: #2c3c1a;
  --awe-moss: #687532;
  --awe-rust: #8c3900;
  --awe-orange: #dd7d36;
  --awe-sand: #ffdd9d;
  --awe-cream: #f4e7ce;
  --awe-white: #ffffff;

  /* ── C-extension · the voice ─────────────────────────────────────────────
     The lockup sets its tagline in wide letterspaced caps. That spacing is the
     brand's own device, so every label, eyebrow and data row inherits it. */
  --awe-tracking-data: 0.055em;   /* uppercase data — never set caps tighter */
  --awe-tracking-eyebrow: 0.2em;  /* section eyebrows, matching the lockup   */
  --awe-tracking-tagline: 0.34em; /* the tagline itself, as drawn in the kit */
  --awe-measure: 66ch;            /* reading measure cap                     */
  --awe-rule: 1px solid var(--border);
  --awe-caption-gap: 11px;        /* image → caption rule                    */
  --awe-figures: "tnum" 1, "zero" 1;  /* every number that sits in a column  */

  /* ── C-extension · the pattern ───────────────────────────────────────────
     Page 3 of the cheat sheet is a tiling motif — the marks at low contrast
     on forest. It is a real brand material, not decoration, so it gets a
     token rather than being inlined at each use. Bound in base.css. */
  --awe-pattern-ink: color-mix(in oklab, var(--awe-black), transparent 78%);
  --awe-pattern-size: 168px;
}

/* ── Forest ─────────────────────────────────────────────────────────────────
   Header, footer, the seat ticker. The ground the vertical lockup is drawn
   on in the kit, so the sand lockup is the correct mark here.               */
[data-surface="forest"] {
  --bg: #2c3c1a;
  --surface: #1f2c12;
  --surface-warm: #687532;
  --fg: #f4e7ce;
  --fg-2: #bbb79b;
  --muted: #a0a283;
  --border: #55603f;
  --border-soft: #414c2c;
  --accent: #ffdd9d;
  --accent-on: #000000;
  --success: #798644;
  --warn: #dd7d36;
  --danger: #c0693c;
  --awe-pattern-ink: color-mix(in oklab, var(--awe-black), transparent 88%);

  background: var(--bg);
  color: var(--fg);
}

/* ── Night ──────────────────────────────────────────────────────────────────
   Galleries and photograph-forward sections. The only ground on which orange
   is legible as text (7.06:1), which is why the monogram sits on black in the
   kit.                                                                      */
[data-surface="night"] {
  --bg: #000000;
  --surface: #16200b;
  --surface-warm: #2c3c1a;
  --fg: #f4e7ce;
  --fg-2: #a39a89;
  --muted: #7b7466;
  --border: #3a3529;
  --border-soft: #241f18;
  --accent: #dd7d36;
  --accent-on: #000000;
  --success: #687532;
  --warn: #dd7d36;
  --danger: #94410d;

  background: var(--bg);
  color: var(--fg);
}

/* ── Sand ───────────────────────────────────────────────────────────────────
   Call-to-action bands. The brightest ground the kit gives, so it is used
   sparingly — once per page, where the page asks for something.             */
[data-surface="sand"] {
  --bg: #ffdd9d;
  --surface: #f4e7ce;
  --surface-warm: #f4e7ce;
  --fg: #2c3c1a;
  --fg-2: #5e6339;
  --muted: #6a6638;
  --border: #d4b978;
  --border-soft: #e6cd8c;
  --accent: #8c3900;
  --accent-on: #ffffff;
  --success: #687532;
  --warn: #c5671a;
  --danger: #8c3900;

  background: var(--bg);
  color: var(--fg);
}

/* Reduced motion is honoured globally — the brand barely moves anyway. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0ms;
    --motion-base: 0ms;
  }
}