/* aidvize — Color tokens
   ==================================================================
   Anchored to the two brand marks:
     • Electric violet  #6804F4  (the chat-bubble icon)  → --violet-600
     • Deep navy ink    #143054  (the wordmark)          → --ink-900
   The palette is vibrant but disciplined: violet carries energy,
   navy grounds it, a cool slate ramp handles neutrals, and a small
   spark set (magenta / cyan) adds life to illustration & data viz. */

:root {
  /* ---- Brand violet ramp ---- */
  --violet-50:  #F4EEFF;
  --violet-100: #E8DCFF;
  --violet-200: #D2B8FF;
  --violet-300: #B68DFF;
  --violet-400: #9758FF;
  --violet-500: #7E2EF8;
  --violet-600: #6804F4;  /* BRAND PRIMARY */
  --violet-700: #5703CE;
  --violet-800: #4602A4;
  --violet-900: #33037A;

  /* ---- Navy / ink ramp ---- */
  --ink-50:  #EAF0F8;
  --ink-100: #CDD9EC;
  --ink-200: #9DB1CF;
  --ink-300: #6A85AE;
  --ink-400: #3C5A88;
  --ink-500: #214268;
  --ink-600: #1A3960;
  --ink-700: #143054;  /* BRAND NAVY (alias of ink-900-ish wordmark) */
  --ink-800: #0F2440;
  --ink-900: #0A1A30;
  --ink-950: #060F1E;

  /* ---- Neutral slate ramp (cool, navy-leaning grays) ---- */
  --slate-50:  #F7F8FB;
  --slate-100: #EEF1F7;
  --slate-200: #E0E5EF;
  --slate-300: #CBD3E1;
  --slate-400: #9AA6BC;
  --slate-500: #6B7A95;
  --slate-600: #4D5B74;
  --slate-700: #374459;
  --slate-800: #232E41;
  --slate-900: #141C2B;

  --white: #FFFFFF;
  --black: #060F1E;

  /* ---- Spark accents (vibrant supporting hues) ---- */
  --spark-magenta: #E5489E;
  --spark-cyan:    #12C4D9;
  --spark-amber:   #FFB020;

  /* ---- Semantic status ---- */
  --success-50:  #E6F8F1;
  --success-500: #12B886;
  --success-700: #0B8A63;

  --warning-50:  #FFF6E6;
  --warning-500: #F59F00;
  --warning-700: #C27C00;

  --danger-50:   #FFEDED;
  --danger-500:  #FA5252;
  --danger-700:  #D43A3A;

  --info-50:     #ECF0FF;
  --info-500:    #4C6EF5;
  --info-700:    #3B55C7;

  /* ---- Brand gradients ---- */
  --gradient-brand:  linear-gradient(135deg, #7E2EF8 0%, #6804F4 100%); /* @kind other */
  --gradient-vivid:  linear-gradient(135deg, #6804F4 0%, #B14BFF 60%, #E5489E 100%); /* @kind other */
  --gradient-ink:    linear-gradient(160deg, #143054 0%, #0A1A30 100%); /* @kind other */
  --gradient-aurora: radial-gradient(120% 120% at 0% 0%, rgba(104,4,244,0.18) 0%, rgba(104,4,244,0) 55%),
                     radial-gradient(120% 120% at 100% 10%, rgba(229,72,158,0.14) 0%, rgba(229,72,158,0) 50%); /* @kind other */

  /* ================================================================
     SEMANTIC ALIASES — reach for these in product UI, not raw ramps.
     ================================================================ */

  /* Text */
  --text-strong:    var(--ink-700);   /* headings, primary text  */
  --text-body:      var(--slate-700); /* paragraph / body copy    */
  --text-muted:     var(--slate-500); /* secondary, captions      */
  --text-subtle:    var(--slate-400); /* placeholders, disabled   */
  --text-brand:     var(--violet-600);
  --text-on-brand:  var(--white);
  --text-on-ink:    var(--white);

  /* Surfaces */
  --surface-page:        var(--slate-50);
  --surface-card:        var(--white);
  --surface-sunken:      var(--slate-100);
  --surface-hover:       var(--slate-100);
  --surface-inverse:     var(--ink-700);
  --surface-inverse-2:   var(--ink-900);
  --surface-brand:       var(--violet-600);
  --surface-brand-hover: var(--violet-700);
  --surface-brand-subtle:var(--violet-50);

  /* Borders */
  --border-subtle:  var(--slate-200);
  --border-default: var(--slate-300);
  --border-strong:  var(--slate-400);
  --border-brand:   var(--violet-600);
  --border-inverse: rgba(255,255,255,0.14);

  /* Interaction */
  --focus-ring:   rgba(104,4,244,0.30);
  --overlay-scrim:rgba(10,26,48,0.55);
}