/* ─────────────────────────────────────────────────────────────────────────────
   Pavilion design tokens — the single source of truth for the look.
   Ported from ClaudeDesign/tokens/ (the "world is dark forest, lime is life" system).

   STEP 1 = COLOURS ONLY. This file (a) defines the full --pav-* palette and
   (b) maps the app's existing semantic vars (--bg / --surface / --accent / …) onto
   it. Because app.css, theme.css, gw-ui.js and lh-nav.js all read those semantic
   vars, loading this file AFTER theme.css re-skins the whole app in one move —
   nav, buttons, cards, toasts, modals — without touching any other file.

   Later steps (not here): web fonts (Jost / Cormorant), glass-card treatment,
   lime glow, radius scale, the login screen, the first-visit animation.
   ───────────────────────────────────────────────────────────────────────────── */
:root {
  /* ---- Base greens (the world) ---- */
  --pav-ink:            #0a110d;   /* deepest — page base */
  --pav-forest-900:     #0c1611;
  --pav-forest-800:     #132019;
  --pav-forest-700:     #16241b;
  --pav-moss-600:       #31493a;
  --pav-sage-500:       #5f7d64;
  --pav-sage-400:       #7f9a80;

  /* ---- Lime (life / the accent) ---- */
  --pav-lime-500:       #a9df4b;   /* primary accent */
  --pav-lime-400:       #b6e35a;
  --pav-lime-300:       #c3e27a;
  --pav-lime-glow:      rgba(150, 215, 70, 0.28);
  --pav-lime-border:    rgba(168, 214, 74, 0.50);

  /* ---- Honey (imagery secondary) ---- */
  --pav-honey-500:      #e2b85a;

  /* ---- Text ---- */
  --pav-text-strong:    #f4f7ef;
  --pav-text:           #eef3ea;
  --pav-text-body:      #d9e3cf;
  --pav-text-label:     #e2ecd7;
  --pav-text-muted:     rgba(230, 240, 225, 0.55);
  --pav-text-faint:     rgba(223, 231, 214, 0.42);

  /* ---- Surfaces & lines ---- */
  --pav-surface-card-top: rgba(9, 17, 12, 0.86);
  --pav-surface-card-bot: rgba(15, 26, 18, 0.52);
  --pav-surface-field:    rgba(255, 255, 255, 0.045);
  --pav-surface-btn:      rgba(255, 255, 255, 0.05);
  --pav-hairline:         rgba(255, 255, 255, 0.06);
  --pav-border-soft:      rgba(255, 255, 255, 0.14);

  /* ---- Signature gradients ---- */
  --pav-gradient-world: linear-gradient(135deg, #0c1611 0%, #132019 32%, #31493a 68%, #5f7d64 100%);
  --pav-gradient-card:  linear-gradient(158deg, rgba(9,17,12,0.86) 0%, rgba(15,26,18,0.52) 100%);
  --pav-gradient-lime:  linear-gradient(90deg, #7fae3a, #c3e27a);

  /* ---- Ecosystem phase colours (wayfinding) ---- */
  --pav-phase-animation:  #c3e27a;
  --pav-phase-signin:     #7fc7d6;
  --pav-phase-dashboard:  #e2b85a;
  --pav-phase-ecologies:  #9ae08a;
  --pav-phase-principles: #c79ae0;

  /* ═══ App semantic vars → Pavilion tokens (this is what re-skins everything) ═══ */
  --bg:           var(--pav-ink);           /* page base — was #0d1512 */
  --surface:      var(--pav-forest-800);    /* cards / sidebar — was #14201b */
  --surface-2:    var(--pav-forest-700);    /* raised surface — was #1d2c25 */
  --text-hi:      var(--pav-text);          /* headings — was #eef3f0 */
  --text-mid:     var(--pav-text-body);     /* body — was #b4c3bb */
  --text-low:     var(--pav-text-muted);    /* muted — was #7f8f86 */
  --accent:       var(--pav-lime-500);      /* THE accent — was teal #3f9d7a → lime */
  --accent-hover: var(--pav-lime-400);      /* was #52b891 */
  --border:       var(--pav-border-soft);   /* hairlines — was #22332b */
  --gradient:     var(--pav-gradient-lime); /* accent gradient — was green */
}