/* ============================================================
   CryptoCalcy — Color Tokens
   ------------------------------------------------------------
   Architecture:
   1. PRIMITIVES  — raw palette scales (never used directly in UI)
   2. SEMANTIC    — role aliases mapped to primitives (use these)
   3. THEMES      — dark is the default (product/marketing);
                    [data-theme="light"] flips transactional surfaces
   ============================================================ */

:root {
  /* ---------- 1. PRIMITIVES ---------- */

  /* Brand — Calcy Violet (the single brand voltage) */
  --violet-50:  #EEEDFE;
  --violet-100: #DAD7FC;
  --violet-200: #B7B1FA;
  --violet-300: #948BF8;
  --violet-400: #8B80F8;
  --violet-500: #6D5EF6;   /* PRIMARY */
  --violet-600: #5A4CE0;   /* pressed / hover-darker */
  --violet-700: #4638B8;
  --violet-800: #2E2678;
  --violet-900: #1B1747;

  /* Secondary accent — Signal Cyan (data-viz + single-product accents) */
  --cyan-300: #6FE7DC;
  --cyan-400: #38D6C8;
  --cyan-500: #14B8AB;

  /* Neutrals — cool near-black to white */
  --neutral-0:   #FFFFFF;
  --neutral-25:  #F7F8FA;
  --neutral-50:  #EEF0F4;
  --neutral-100: #E3E6EC;
  --neutral-200: #CDD2DD;
  --neutral-300: #A7AEBE;
  --neutral-400: #7A8194;
  --neutral-500: #5B6172;
  --neutral-600: #3B4150;
  --neutral-700: #262B3A;
  --neutral-800: #1E2230;
  --neutral-850: #151823;
  --neutral-900: #12141C;
  --neutral-950: #0C0E14;

  /* Semantic hues */
  --green-400: #2FE0A0;
  --green-500: #16C784;   /* trading up / success */
  --green-600: #0FA36B;
  --red-400:   #FF5C66;
  --red-500:   #EA3943;   /* trading down / danger */
  --red-600:   #C42A33;
  --amber-400: #FFC24B;
  --amber-500: #F5A623;   /* warning */
  --amber-600: #C97F12;
  --blue-400:  #5B9DFF;
  --blue-500:  #3B82F6;   /* info / focus ring base */
  --blue-600:  #2565D6;

  /* ---------- 2. SEMANTIC (theme-agnostic brand) ---------- */
  --color-primary:          var(--violet-500);
  --color-primary-hover:    var(--violet-400);
  --color-primary-active:   var(--violet-600);
  --color-primary-subtle:   color-mix(in srgb, var(--violet-500) 14%, transparent);
  --color-on-primary:       var(--neutral-0);

  --color-accent:           var(--cyan-400);
  --color-accent-strong:    var(--cyan-500);

  /* Semantic states */
  --color-success:          var(--green-500);
  --color-success-subtle:   color-mix(in srgb, var(--green-500) 14%, transparent);
  --color-danger:           var(--red-500);
  --color-danger-subtle:    color-mix(in srgb, var(--red-500) 14%, transparent);
  --color-warning:          var(--amber-500);
  --color-warning-subtle:   color-mix(in srgb, var(--amber-500) 16%, transparent);
  --color-info:             var(--blue-500);
  --color-info-subtle:      color-mix(in srgb, var(--blue-500) 14%, transparent);

  /* Market semantics (never used as surface fills) */
  --color-up:               var(--green-500);
  --color-down:             var(--red-500);

  /* Focus ring */
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--blue-500) 45%, transparent);
  --focus-ring-brand: 0 0 0 3px color-mix(in srgb, var(--violet-500) 45%, transparent);
}

/* ---------- 3a. DARK THEME (default) ---------- */
:root,
[data-theme="dark"] {
  --surface-canvas:    var(--neutral-950);
  --surface-sunken:    #090B10;
  --surface-card:      var(--neutral-850);
  --surface-elevated:  var(--neutral-800);
  --surface-hover:     color-mix(in srgb, var(--neutral-0) 5%, transparent);
  --surface-inset:     #0A0C12;

  --border-hairline:   var(--neutral-700);
  --border-strong:     var(--neutral-600);
  --border-interactive: var(--neutral-500);

  --text-strong:       var(--neutral-0);
  --text-body:         var(--neutral-200);
  --text-muted:        var(--neutral-400);
  --text-subtle:       var(--neutral-500);
  --text-on-accent:    var(--neutral-950);

  --overlay-scrim:     color-mix(in srgb, #000 68%, transparent);

  --gradient-brand:    linear-gradient(135deg, var(--violet-500) 0%, var(--violet-700) 100%);
  --gradient-hero:     linear-gradient(180deg, color-mix(in srgb, var(--violet-500) 22%, var(--neutral-950)) 0%, var(--neutral-950) 62%);
}

/* ---------- 3b. LIGHT THEME (transactional) ---------- */
[data-theme="light"] {
  --surface-canvas:    var(--neutral-0);
  --surface-sunken:    var(--neutral-25);
  --surface-card:      var(--neutral-0);
  --surface-elevated:  var(--neutral-0);
  --surface-hover:     color-mix(in srgb, var(--neutral-900) 4%, transparent);
  --surface-inset:     var(--neutral-25);

  --border-hairline:   var(--neutral-100);
  --border-strong:     var(--neutral-200);
  --border-interactive: var(--neutral-300);

  --text-strong:       var(--neutral-900);
  --text-body:         var(--neutral-600);
  --text-muted:        var(--neutral-400);
  --text-subtle:       var(--neutral-300);
  --text-on-accent:    var(--neutral-900);

  --overlay-scrim:     color-mix(in srgb, var(--neutral-900) 45%, transparent);

  --gradient-brand:    linear-gradient(135deg, var(--violet-500) 0%, var(--violet-700) 100%);
  --gradient-hero:     linear-gradient(180deg, color-mix(in srgb, var(--violet-500) 10%, var(--neutral-0)) 0%, var(--neutral-0) 60%);
}