/* =========================================================
   WTME (World Through My Eyes) · Design Tokens
   worldtme.com — AR-primary travel content + affiliate engine
   Added 2026-08-11 per D51 (WTME migrates fully to ZLT).
   ---------------------------------------------------------
   Source of truth: 07-tenant-materials/wtme-brand-pack/brand/tokens/
   wtme-tokens.json (extracted from the live worldtme.com theme +
   logo-slogan.png, 2026-08-08). WTME is NOT part of the Zenitha
   luxury cluster — this file overrides the shared semantic surfaces
   with WTME's own palette rather than tuning within the cluster's
   gold/emerald/navy discipline. Follows the same override-layer
   convention as zenitha-yalla-london.css (a distinct brand that
   still reuses the corporate baseline for surfaces/rhythm/spacing).
   ========================================================= */

@import url("./zenitha-corporate.css");

:root {

  /* ---- WTME palette (wtme-tokens.json) ---------------- */
  --wtme-sky:          #06A4F0;   /* primary accent, CTAs, plane badge */
  --wtme-leaf:         #00A060;   /* secondary, nature, success */
  --wtme-sun:          #F0C010;   /* highlights, price tags */
  --wtme-berry:        #901040;   /* sparing accent <10% */
  --wtme-leaf-light:   #80C040;   /* tertiary green accent */
  --wtme-ink:          #0F131F;   /* headings, dark overlays */
  --wtme-slate:        #35415B;   /* body text on light */
  --wtme-cloud:        #F2F4F7;   /* light backgrounds */

  /* ---- Override semantic surfaces (WTME replaces Zenitha) --- */
  --color-surface:           var(--wtme-cloud);
  --color-surface-warm:      #FFFFFF;
  --color-surface-inverse:   var(--wtme-ink);
  --color-surface-strategic: var(--wtme-leaf);   /* was emerald */
  --color-surface-concierge: var(--wtme-ink);    /* WTME has no concierge surface; reuse ink */

  --color-ink:               var(--wtme-ink);
  --color-ink-soft:          var(--wtme-slate);
  --color-ink-inverse:       #FFFFFF;

  --color-accent-gold:       var(--wtme-sun);
  --color-accent-emerald:    var(--wtme-leaf);
  --color-accent-navy:       var(--wtme-ink);

  /* ---- Typography: single family (Cairo) across AR + Latin --- */
  /* wtme-tokens.json: "Single family covers Arabic + Latin. Never
     letter-space Arabic." Cairo is loaded via next/font (fonts.ts),
     attached only when the resolved pack is 'wtme' — see
     fontClassNames(locale, pack) in app/_brand/fonts.ts.
     `--zen-display-family` / `--zen-text-family` / `--zen-arabic-display` /
     `--zen-arabic-text` are what public.css's --zlt-display/--zlt-sans
     actually resolve through (NOT --font-display/--font-arabic below,
     which only the standalone 06-brand-and-design web components read) —
     overriding them here is what makes Cairo render on the real page,
     following the same override-layer pattern zenitha-yalla-london.css
     uses for its Inter override. This file loads after next/font's
     className-injected style (later in document order, equal
     specificity), so it wins the cascade for these variables. */
  --zen-display-family: "Cairo", sans-serif;
  --zen-text-family:    "Cairo", sans-serif;
  --zen-arabic-display: "Cairo", sans-serif;
  --zen-arabic-text:    "Cairo", sans-serif;

  /* Web-component consumers (06-brand-and-design/*.js) read these directly
     — kept for consistency even though NavBar.tsx doesn't mount
     <zenitha-logo> for the wtme pack (see NavBar.tsx: that component's
     hard-coded PACK table only knows corporate/cruise/yachts and would
     render the literal wordmark "ZENITHA", which is wrong for WTME). */
  --font-display:     "Cairo", sans-serif;
  --font-text:         "Cairo", sans-serif;
  --font-arabic:       "Cairo", sans-serif;
  --font-arabic-text:  "Cairo", sans-serif;

  /* ---- Composition discipline (advisory) -------------- */
  --discipline-gold-max:    10%;   /* WTME "Sun" accent — highlights/price tags only */
  --discipline-emerald-max: 20%;   /* WTME "Leaf" is a principal color, not a jewel accent */
}

/* Served-copy addition (Phase 2, 2026-07-29 convention): unified semantic
   accent = this pack's principal color, consumed by public.css --zlt-accent. */
:root {
  --color-accent: var(--wtme-sky);
  --color-accent-soft: #3DB8F5;
}