/*!
 * Luz Estelar — Design Tokens (Source of Truth)
 * ─────────────────────────────────────────────
 * Include FIRST in every page. Override locally only when needed.
 * Versioned separately from page code so we can evolve without
 * touching 100+ HTML files.
 */

:root {
  /* ── Brand: Gold system ─────────────────────────────────────── */
  --gold:          #d4a849;
  --gold-light:    #f0d078;
  --gold-deep:     #c89030;
  --gold-dim:      rgba(212, 168, 73, 0.15);
  --gold-glow:     rgba(212, 168, 73, 0.28);
  --gold-whisper:  rgba(212, 168, 73, 0.06);

  /* ── Brand: Accent palette (cultural systems + UX signals) ─── */
  --purple:        #7c5cbf;  /* Vedic / mystic */
  --purple-dim:    rgba(124, 92, 191, 0.15);
  --rose:          #e89b9b;  /* Celtic / heart */
  --rose-dim:      rgba(232, 155, 155, 0.15);
  --green:         #8fc79a;  /* Mayan / earth */
  --green-dim:     rgba(143, 199, 154, 0.15);
  --blue:          #7aa9d6;  /* Chinese / water */
  --blue-dim:      rgba(122, 169, 214, 0.15);

  /* ── Background depth (darkest → lightest) ──────────────────── */
  --bg-deep:       #06061a;  /* page canvas */
  --bg:            #06061a;  /* alias for backwards-compat */
  --bg-mid:        #0c0c2a;  /* cards, raised surfaces */
  --bg-high:       #14143a;  /* elevated surfaces, hovers */

  /* ── Text hierarchy ─────────────────────────────────────────── */
  --text:          #e0dce8;  /* primary */
  --text-dim:      #9890a8;  /* secondary, labels */
  --text-mute:     #6b6478;  /* tertiary, captions */
  --text-inverse:  #06061a;  /* on-gold for contrast */

  /* ── Glass / surface tints ──────────────────────────────────── */
  --glass:         rgba(255, 255, 255, 0.04);
  --glass-b:       rgba(255, 255, 255, 0.08);  /* borders */
  --glass-hi:      rgba(255, 255, 255, 0.12);  /* hovers */

  /* ── Semantic status ────────────────────────────────────────── */
  --ok:            #8fc79a;
  --warn:          #e8c07a;
  --err:           #e89b9b;

  /* ── Typography ─────────────────────────────────────────────── */
  --font-display:  'Cormorant Garamond', 'Times New Roman', serif;
  --font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Type scale — minor-third (1.2×) progression, mobile-first */
  --fs-xs:         0.66rem;   /* 10.5px — captions, badges */
  --fs-sm:         0.75rem;   /* 12px   — supporting text */
  --fs-base:       0.875rem;  /* 14px   — body */
  --fs-md:         1rem;      /* 16px   — lead body */
  --fs-lg:         1.125rem;  /* 18px   — card titles */
  --fs-xl:         1.35rem;   /* 21.6px — section titles */
  --fs-2xl:        1.75rem;   /* 28px   — hero */
  --fs-3xl:        2.25rem;   /* 36px   — page title */

  --lh-tight:      1.2;
  --lh-snug:       1.35;
  --lh-base:       1.55;
  --lh-loose:      1.75;

  /* ── Spacing scale — 4px baseline, consistent rhythm ────────── */
  --sp-0:          0;
  --sp-1:          4px;
  --sp-2:          8px;
  --sp-3:          12px;
  --sp-4:          16px;
  --sp-5:          20px;
  --sp-6:          24px;
  --sp-7:          32px;
  --sp-8:          40px;
  --sp-9:          56px;
  --sp-10:         72px;

  /* ── Radii ──────────────────────────────────────────────────── */
  --r-xs:          4px;
  --r-sm:          6px;
  --r-md:          8px;
  --r-lg:          12px;
  --r-xl:          16px;
  --r-pill:        999px;
  --r-circle:      50%;

  /* ── Shadows (subtle, gold-tinged on interactive) ───────────── */
  --shadow-1:      0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-2:      0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-3:      0 10px 32px rgba(0, 0, 0, 0.4);
  --shadow-gold:   0 4px 14px var(--gold-glow);
  --shadow-inner:  inset 0 0 30px var(--gold-whisper);

  /* ── Motion ─────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.2, 0, 0, 1.2);
  --dur-fast:      120ms;
  --dur-base:      200ms;
  --dur-slow:      320ms;

  /* ── Layout ─────────────────────────────────────────────────── */
  --maxw-text:     640px;    /* readable line length */
  --maxw-content:  1120px;   /* page canvas cap */
  --maxw-card:     480px;    /* mobile-first card cap */
  --tap-min:       44px;     /* Apple HIG + Material touch target */

  /* ── Z-index scale ──────────────────────────────────────────── */
  --z-bg:          -1;
  --z-base:        0;
  --z-raised:      10;
  --z-sticky:      100;
  --z-overlay:     1000;
  --z-modal:       2000;
  --z-toast:       3000;

  /* ── Safe-area insets (iOS notch, home indicator) ───────────── */
  --safe-top:      env(safe-area-inset-top, 0px);
  --safe-bottom:   env(safe-area-inset-bottom, 0px);
  --safe-left:     env(safe-area-inset-left, 0px);
  --safe-right:    env(safe-area-inset-right, 0px);
}

/* ── Legacy aliases (Phase 3 backward-compat) ───────────────────
 * Pages authored before the token file exist use different var
 * names for the same concept. Rather than rewrite every reference
 * in 100+ files, we map the old names to the new ones here so
 * deleting the inline `:root` blocks becomes a safe drop-in.
 */
:root {
  --glass-border:     var(--glass-b);      /* dashboard.html et al. */
  --glass-bg:         var(--glass);        /* mapa-estelar.html et al. */
  --accent-purple:    var(--purple);       /* dashboard.html */
  --text-main:        var(--text);         /* mapa-estelar.html et al. */
  /* --bg → --bg-deep is already defined above */
}

/* Reduced-motion users: disable animations that aren't essential. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:    0ms;
    --dur-base:    0ms;
    --dur-slow:    0ms;
  }
}