/* ============================================================
   wildLOGIC — Color tokens
   Brand DNA: a duality. WILD = vivid neon spectrum (magenta,
   violet) over deep night (navy/black). LOGIC = calm, warm,
   structured neutrals (cream, ink, stone). Color is used with
   restraint: cream + ink as the canvas, magenta/violet as
   charged accents, navy as the considered deep tone.
   ============================================================ */

:root {
  /* ---- Core brand palette (from Colours.png) ---------------- */
  --wl-black:    #000000;
  --wl-white:    #ffffff;
  --wl-magenta:  #a500d6;  /* electric magenta — the wild spark */
  --wl-violet:   #7256ff;  /* periwinkle violet — the logic glow */
  --wl-navy:     #0a1174;  /* deep night navy — considered depth */
  --wl-cream:    #f8f4eb;  /* warm paper — the resting canvas */

  /* ---- Magenta scale ---------------------------------------- */
  --wl-magenta-50:  #fbeafe;
  --wl-magenta-100: #f3c8fb;
  --wl-magenta-200: #e795f3;
  --wl-magenta-300: #d65ee8;
  --wl-magenta-400: #c12ddd;
  --wl-magenta-500: #a500d6;  /* base */
  --wl-magenta-600: #8a00b4;
  --wl-magenta-700: #6b0089;
  --wl-magenta-800: #4c0061;
  --wl-magenta-900: #2f003c;

  /* ---- Violet scale ----------------------------------------- */
  --wl-violet-50:  #efedff;
  --wl-violet-100: #ddd8ff;
  --wl-violet-200: #c2baff;
  --wl-violet-300: #a294ff;
  --wl-violet-400: #8a78ff;
  --wl-violet-500: #7256ff;  /* base */
  --wl-violet-600: #5a3ce8;
  --wl-violet-700: #452bbf;
  --wl-violet-800: #311e8a;
  --wl-violet-900: #1f1459;

  /* ---- Navy scale ------------------------------------------- */
  --wl-navy-50:  #e7e8f5;
  --wl-navy-100: #c4c6e6;
  --wl-navy-200: #9094c9;
  --wl-navy-300: #5a60a8;
  --wl-navy-400: #2c3389;
  --wl-navy-500: #0a1174;  /* base */
  --wl-navy-600: #080d5e;
  --wl-navy-700: #060a47;
  --wl-navy-800: #040630;
  --wl-navy-900: #02031a;

  /* ---- Neutral scale: warm cream → warm ink ----------------- */
  --wl-cream-50:  #fdfbf6;
  --wl-cream-100: #f8f4eb;  /* base cream */
  --wl-cream-200: #efe8d9;
  --wl-sand-300:  #e0d7c4;
  --wl-stone-400: #bfb6a3;
  --wl-stone-500: #8f8675;
  --wl-graphite-600: #5b554b;
  --wl-graphite-700: #383530;
  --wl-ink-800:   #1c1b1a;
  --wl-ink-900:   #0c0c0d;
  --wl-ink-950:   #060607;

  /* ---- Semantic: text --------------------------------------- */
  --text-primary:   var(--wl-ink-900);
  --text-secondary: var(--wl-graphite-600);
  --text-muted:     var(--wl-stone-500);
  --text-inverse:   var(--wl-cream-100);
  --text-accent:    var(--wl-magenta-600);
  --text-on-accent: var(--wl-white);

  /* ---- Semantic: surfaces ----------------------------------- */
  --surface-page:    var(--wl-cream-100);
  --surface-card:    var(--wl-white);
  --surface-raised:  var(--wl-cream-50);
  --surface-sunken:  var(--wl-cream-200);
  --surface-inverse: var(--wl-ink-900);
  --surface-night:   var(--wl-navy-900);
  --surface-accent:  var(--wl-magenta-500);

  /* ---- Semantic: borders ------------------------------------ */
  --border-subtle:  color-mix(in oklab, var(--wl-ink-900) 8%, transparent);
  --border-default: color-mix(in oklab, var(--wl-ink-900) 16%, transparent);
  --border-strong:  var(--wl-ink-900);
  --border-inverse: color-mix(in oklab, var(--wl-cream-100) 22%, transparent);

  /* ---- Semantic: accents & interaction ---------------------- */
  --accent:        var(--wl-magenta-500);
  --accent-hover:  var(--wl-magenta-600);
  --accent-press:  var(--wl-magenta-700);
  --accent-2:      var(--wl-violet-500);
  --accent-2-hover:var(--wl-violet-600);
  --accent-deep:   var(--wl-navy-500);
  --focus-ring:    var(--wl-violet-500);

  /* ---- Semantic: status (kept in-family, low-chroma) -------- */
  --status-positive: #1f8a5b;
  --status-warning:  #c98a00;
  --status-critical: #c0264b;
  --status-info:     var(--wl-violet-500);

  /* ---- Signature gradients (neon imagery DNA) --------------- */
  --gradient-wild:  linear-gradient(110deg, var(--wl-magenta-500) 0%, var(--wl-violet-500) 55%, var(--wl-navy-500) 100%);
  --gradient-neon:  linear-gradient(120deg, #ff5e9c 0%, var(--wl-magenta-500) 38%, var(--wl-violet-500) 100%);
  --gradient-night: linear-gradient(180deg, var(--wl-navy-700) 0%, var(--wl-ink-950) 100%);
  --gradient-dusk:  linear-gradient(135deg, #ff8a5b 0%, var(--wl-magenta-500) 60%, var(--wl-violet-600) 100%);
}