/* ============================================================
   LIQUIDE — Color tokens
   Brand palette (from brand sheet):
   purple #6a0ba8 · ink #0f0f0f · grey #d4d4d4
   deep purple #3b0f59 · white #ffffff · lavender #dccdf1
   ============================================================ */

:root {
  /* ---- Brand purple scale ---- */
  --purple-50:  #f5edfb;
  --purple-100: #dccdf1;  /* brand lavender */
  --purple-200: #c6a7e8;
  --purple-300: #a974d8;
  --purple-400: #8a3cc5;
  --purple-500: #6a0ba8;  /* PRIMARY brand purple */
  --purple-600: #560f88;
  --purple-700: #3b0f59;  /* brand deep purple */
  --purple-800: #290b3f;
  --purple-900: #190726;

  /* ---- Neutral / ink scale ---- */
  --white:    #ffffff;
  --ink-50:   #f6f6f7;
  --ink-100:  #e9e9eb;
  --ink-200:  #d4d4d4;   /* brand grey */
  --ink-300:  #b3b3b7;
  --ink-400:  #8a8a90;
  --ink-500:  #5f5f66;
  --ink-600:  #41414a;
  --ink-700:  #2a2a30;
  --ink-800:  #1a1a1d;
  --ink-900:  #0f0f0f;   /* brand ink / near-black */
  --black:    #0f0f0f;

  /* ---- Raw brand aliases ---- */
  --brand-purple:  var(--purple-500);
  --brand-deep:    var(--purple-700);
  --brand-lavender:var(--purple-100);
  --brand-ink:     var(--ink-900);
  --brand-grey:    var(--ink-200);

  /* ============================================================
     SEMANTIC — dark-first (brand canvas is near-black)
     ============================================================ */
  --bg:            var(--ink-900);   /* page background */
  --bg-deep:       #080808;          /* deepest wells */
  --surface:       var(--ink-800);   /* cards on dark */
  --surface-2:     var(--ink-700);   /* nested / hover */
  --surface-inset: #131316;

  --text:          var(--white);
  --text-strong:   var(--white);
  --text-muted:    var(--ink-300);
  --text-subtle:   var(--ink-400);
  --text-on-brand: var(--white);

  --brand:         var(--purple-500);
  --brand-hover:   var(--purple-400);
  --brand-press:   var(--purple-600);
  --brand-soft:    rgba(106, 11, 168, 0.16);
  --tint:          var(--purple-100);

  --border:        rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.20);
  --border-brand:  rgba(138, 60, 197, 0.45);

  --focus-ring:    var(--purple-300);

  /* Status (kept on-brand / minimal) */
  --success: #34c77b;
  --warning: #e8b53a;
  --danger:  #e0556b;

  /* Signature gradients */
  --grad-brand:  linear-gradient(135deg, #8a3cc5 0%, #6a0ba8 55%, #3b0f59 100%); /* @kind other */
  --grad-glow:   radial-gradient(60% 80% at 50% 0%, rgba(106,11,168,0.55) 0%, rgba(106,11,168,0) 70%); /* @kind other */
  --grad-ink:    linear-gradient(180deg, #1a1a1d 0%, #0f0f0f 100%); /* @kind other */
}

/* ------------------------------------------------------------
   LIGHT scope — opt-in for light sections (.on-light)
   ------------------------------------------------------------ */
.on-light {
  --bg:            var(--white);
  --bg-deep:       var(--ink-50);
  --surface:       var(--white);
  --surface-2:     var(--ink-50);
  --surface-inset: var(--ink-100);

  --text:          var(--ink-900);
  --text-strong:   var(--ink-900);
  --text-muted:    var(--ink-500);
  --text-subtle:   var(--ink-400);

  --border:        rgba(15, 15, 15, 0.10);
  --border-strong: rgba(15, 15, 15, 0.18);
}