/* =========================================================
   JUNGLE 8 · SEMANTIC TOKENS
   Map raw foundation tokens to intent-named tokens.
   Components reference THESE — never raw values directly.
   ========================================================= */

:root {
  /* ---------- SURFACE LAYERS ---------- */
  --surface-page:     var(--j8-bg-0);    /* deepest = page background */
  --surface-base:     var(--j8-bg-1);    /* default section */
  --surface-raised:   var(--j8-bg-2);    /* card */
  --surface-overlay:  var(--j8-bg-3);    /* popover, dropdown */
  --surface-pressed:  var(--j8-bg-4);    /* active state */
  --surface-pink-tint: rgba(236, 155, 255, 0.05);

  /* Inverse */
  --surface-inverse:  var(--j8-pink-500);
  --surface-inverse-text: var(--j8-text-on-pink);

  /* ---------- BORDER ---------- */
  --border-default: var(--j8-border-soft);
  --border-subtle:  var(--j8-border-subtle);
  --border-strong:  var(--j8-border-strong);
  --border-neon:    var(--j8-border-neon);

  /* ---------- TEXT ---------- */
  --text-primary:   var(--j8-text-primary);
  --text-secondary: var(--j8-text-secondary);
  --text-tertiary:  var(--j8-text-tertiary);
  --text-quaternary: var(--j8-text-quaternary);
  --text-brand:     var(--j8-pink-500);
  --text-on-brand:  var(--j8-text-on-pink);
  --text-accent-amber: var(--j8-amber-400);
  --text-accent-jade:  var(--j8-jade-400);

  /* ---------- BRAND ACTIONS ---------- */
  --brand-primary:        var(--j8-pink-500);
  --brand-primary-hover:  var(--j8-pink-400);
  --brand-primary-active: var(--j8-pink-600);
  --brand-on-primary:     var(--j8-text-on-pink);

  /* Ghost / secondary */
  --brand-ghost-border:        var(--j8-border-strong);
  --brand-ghost-border-hover:  var(--j8-border-neon);
  --brand-ghost-bg-hover:      var(--surface-pink-tint);

  /* ---------- EFFECTS ---------- */
  --shadow-card:    var(--j8-shadow-md);
  --shadow-popover: var(--j8-shadow-lg);
  --shadow-hero:    var(--j8-shadow-xl);

  --glow-button:    var(--j8-glow-sm);
  --glow-button-hover: var(--j8-glow-md);
  --glow-text:      var(--j8-glow-text);
  --glow-text-hero: var(--j8-glow-text-strong);

  /* ---------- FOCUS ring (brand tinted, never browser default) ---------- */
  --focus-ring: 0 0 0 3px rgba(236, 155, 255, 0.35), 0 0 0 1px var(--j8-pink-500);
}