/* ============================================================
   VersaSol · Color Tokens
   Primary owner: Blue #1B6FF8
   Palette: Blue + Cyan + Navy + Steel
   ============================================================ */

:root {
  /* ── Brand Blue (Primary) ─────────────────────────────────── */
  --color-blue-50:  #EBF1FE;
  --color-blue-100: #D6E4FD;
  --color-blue-200: #ADCAFB;
  --color-blue-300: #84AFF9;
  --color-blue-400: #5B94F8;
  --color-blue-500: #3B7FF8;
  --color-blue-600: #1B6FF8;   /* ← PRIMARY · brand owner */
  --color-blue-700: #155EC6;
  --color-blue-800: #104D95;
  --color-blue-900: #0B3B6E;
  --color-blue-950: #071F3B;

  /* ── Cyan (Accent) ────────────────────────────────────────── */
  --color-cyan-50:  #ECFEFF;
  --color-cyan-100: #CFFAFE;
  --color-cyan-200: #A5F3FC;
  --color-cyan-300: #67E8F9;
  --color-cyan-400: #22D3EE;
  --color-cyan-500: #06B6D4;   /* ← ACCENT */
  --color-cyan-600: #0891B2;
  --color-cyan-700: #0E7490;
  --color-cyan-800: #155E75;
  --color-cyan-900: #164E63;

  /* ── Navy (Dark surfaces, sidebar, headers) ───────────────── */
  --color-navy-600: #234874;
  --color-navy-700: #1C3A5C;
  --color-navy-800: #162D47;
  --color-navy-900: #112030;
  --color-navy-950: #0D1A2D;   /* ← NAVY · dark bg */

  /* ── Steel (Neutral blue-grays) ───────────────────────────── */
  --color-steel-50:  #F4F6F9;
  --color-steel-100: #E8ECF1;
  --color-steel-200: #D0D9E5;
  --color-steel-300: #B0BFD2;
  --color-steel-400: #8FA5BE;
  --color-steel-500: #7A90AE;  /* ← STEEL */
  --color-steel-600: #64799A;
  --color-steel-700: #4F6080;
  --color-steel-800: #3B4B66;
  --color-steel-900: #273350;

  /* ── Warm Neutral ─────────────────────────────────────────── */
  --color-cream:   #F8F7F4;
  --color-white:   #FFFFFF;

  /* ── Semantic ─────────────────────────────────────────────── */
  --color-success:       #16A34A;
  --color-success-light: #DCFCE7;
  --color-success-dark:  #14532D;

  --color-warning:       #D97706;
  --color-warning-light: #FEF3C7;
  --color-warning-dark:  #92400E;

  --color-danger:        #DC2626;
  --color-danger-light:  #FEE2E2;
  --color-danger-dark:   #7F1D1D;

  --color-info:          #1B6FF8;
  --color-info-light:    #EBF1FE;

  /* ── Semantic Aliases ─────────────────────────────────────── */
  --color-primary:        var(--color-blue-600);
  --color-primary-hover:  var(--color-blue-700);
  --color-primary-light:  var(--color-blue-100);
  --color-primary-xl:     var(--color-blue-50);

  --color-accent:         var(--color-cyan-500);
  --color-accent-hover:   var(--color-cyan-600);
  --color-accent-light:   var(--color-cyan-100);

  --color-navy:           var(--color-navy-950);
  --color-steel:          var(--color-steel-500);

  /* ── Surface / Background ─────────────────────────────────── */
  --color-bg:             #F5F7FA;
  --color-bg-card:        #FFFFFF;
  --color-bg-dark:        var(--color-navy-950);
  --color-bg-subtle:      var(--color-steel-50);

  /* ── Text ─────────────────────────────────────────────────── */
  --color-text-primary:   var(--color-navy-950);
  --color-text-secondary: var(--color-steel-700);
  --color-text-tertiary:  var(--color-steel-500);
  --color-text-disabled:  var(--color-steel-400);
  --color-text-inverse:   #FFFFFF;
  --color-text-accent:    var(--color-blue-600);
  --color-text-link:      var(--color-blue-600);

  /* ── Border ───────────────────────────────────────────────── */
  --color-border:         var(--color-steel-200);
  --color-border-strong:  var(--color-steel-300);
  --color-border-focus:   var(--color-blue-600);
  --color-border-dark:    rgba(255, 255, 255, 0.10);

  /* ── Overlay ──────────────────────────────────────────────── */
  --color-overlay:        rgba(13, 26, 45, 0.48);
  --color-scrim:          rgba(13, 26, 45, 0.08);
}