/* ==========================================================================
   DESIGN TOKENS — Signature Energy Design System
   The only place color, spacing, radius, shadow, and typography values live.
   All other CSS files consume these variables — never hardcode values elsewhere.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     PRIMITIVE LAYER — raw scale values. Never use these directly in
     components; only reference them via the semantic layer below.
     ------------------------------------------------------------------ */

  /* Blues */
  --_blue-50:  #eff6ff;
  --_blue-100: #dbeafe;
  --_blue-200: #bfdbfe;
  --_blue-300: #93c5fd;
  --_blue-400: #60a5fa;
  --_blue-500: #3b82f6;
  --_blue-600: #2563eb;
  --_blue-700: #1d4ed8;
  --_blue-800: #1e40af;
  --_blue-900: #1e3a8a;

  /* Slates (primary neutrals) */
  --_slate-50:  #f8fafc;
  --_slate-100: #f1f5f9;
  --_slate-200: #e2e8f0;
  --_slate-300: #cbd5e1;
  --_slate-400: #94a3b8;
  --_slate-500: #64748b;
  --_slate-600: #475569;
  --_slate-700: #334155;
  --_slate-800: #1e293b;
  --_slate-900: #0f172a;
  --_slate-950: #020617;

  /* Greens */
  --_green-50:  #f0fdf4;
  --_green-100: #dcfce7;
  --_green-200: #bbf7d0;
  --_green-500: #22c55e;
  --_green-600: #16a34a;
  --_green-700: #15803d;

  /* Ambers */
  --_amber-50:  #fffbeb;
  --_amber-100: #fef3c7;
  --_amber-200: #fde68a;
  --_amber-500: #f59e0b;
  --_amber-600: #d97706;
  --_amber-700: #b45309;

  /* Reds */
  --_red-50:  #fff1f2;
  --_red-100: #fee2e2;
  --_red-200: #fecaca;
  --_red-500: #ef4444;
  --_red-600: #dc2626;
  --_red-700: #b91c1c;

  /* Violets */
  --_violet-50:  #f5f3ff;
  --_violet-100: #ede9fe;
  --_violet-500: #8b5cf6;
  --_violet-600: #7c3aed;
  --_violet-700: #6d28d9;

  /* ------------------------------------------------------------------
     SEMANTIC LAYER — meaningful names. Use only these in components.
     ------------------------------------------------------------------ */

  /* Brand */
  --color-primary:          var(--_blue-600);
  --color-primary-hover:    var(--_blue-700);
  --color-primary-active:   var(--_blue-800);
  --color-primary-subtle:   var(--_blue-50);
  --color-primary-muted:    var(--_blue-100);
  --color-primary-ring:     var(--_blue-200);
  --color-primary-text:     var(--_blue-700);
  --color-text-on-primary:  #ffffff;

  /* Add / create action — a paler blue than the primary CTA */
  --color-add:              var(--_blue-400);
  --color-add-hover:        var(--_blue-500);
  --color-add-active:       var(--_blue-600);

  /* Surface */
  --color-bg:               #ffffff;
  --color-surface:          #ffffff;
  --color-page-bg:          var(--_blue-50);
  --color-bg-subtle:        var(--_slate-50);
  --color-bg-muted:         var(--_slate-100);
  --color-bg-overlay:       rgba(15, 23, 42, 0.5);

  /* Borders */
  --color-border-subtle:    var(--_slate-100);
  --color-border:           var(--_slate-200);
  --color-border-strong:    var(--_slate-300);
  --color-border-focus:     var(--_blue-400);

  /* Text */
  --color-text:             var(--_slate-900);
  --color-text-muted:       var(--_slate-500);
  --color-text-subtle:      var(--_slate-400);
  --color-text-placeholder: var(--_slate-400);
  --color-text-disabled:    var(--_slate-300);
  --color-text-inverse:     #ffffff;

  /* Status — success */
  --color-success:          var(--_green-500);
  --color-success-hover:    var(--_green-600);
  --color-success-bg:       var(--_green-100);
  --color-success-bg-subtle:var(--_green-50);
  --color-success-text:     var(--_green-700);
  --color-success-border:   var(--_green-200);

  /* Status — warning */
  --color-warning:          var(--_amber-500);
  --color-warning-hover:    var(--_amber-600);
  --color-warning-bg:       var(--_amber-100);
  --color-warning-bg-subtle:var(--_amber-50);
  --color-warning-text:     var(--_amber-700);
  --color-warning-border:   var(--_amber-200);
  /* Softer/pastel amber for filled + outlined action buttons */
  --color-warning-soft:       #f9c877;
  --color-warning-soft-hover: #f4b658;

  /* Status — danger */
  --color-danger:           var(--_red-500);
  --color-danger-hover:     var(--_red-600);
  --color-danger-bg:        var(--_red-100);
  --color-danger-bg-subtle: var(--_red-50);
  --color-danger-text:      var(--_red-700);
  --color-danger-border:    var(--_red-200);

  /* Status — info */
  --color-info:             var(--_blue-500);
  --color-info-bg:          var(--_blue-100);
  --color-info-bg-subtle:   var(--_blue-50);
  --color-info-text:        var(--_blue-700);
  --color-info-border:      var(--_blue-200);

  /* Status — neutral */
  --color-neutral:          var(--_slate-400);
  --color-neutral-bg:       var(--_slate-100);
  --color-neutral-text:     var(--_slate-600);
  --color-neutral-border:   var(--_slate-200);

  /* ------------------------------------------------------------------
     LAYOUT TOKENS
     ------------------------------------------------------------------ */

  /* Sidebar */
  --sidebar-bg:             var(--_slate-900);
  --sidebar-border:         rgba(255,255,255,0.06);
  --sidebar-text:           var(--_slate-400);
  --sidebar-text-active:    #ffffff;
  --sidebar-icon:           var(--_slate-500);
  --sidebar-icon-active:    #ffffff;
  --sidebar-active-bg:      rgba(59,130,246,0.12);
  --sidebar-active-bar:     var(--color-primary);
  --sidebar-hover-bg:       rgba(255,255,255,0.04);
  --sidebar-section-label:  var(--_slate-600);
  --sidebar-width:          64px;
  --sidebar-width-expanded: 240px;
  --sidebar-header-height:  56px;

  /* Topbar */
  --topbar-bg:              #ffffff;
  --topbar-border:          var(--color-border);
  --topbar-height:          56px;
  --topbar-text:            var(--color-text);

  /* ------------------------------------------------------------------
     SPACING — strict 8pt grid
     ------------------------------------------------------------------ */
  --space-px: 1px;
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* Content max width */
  --content-max-width: 1440px;

  /* ------------------------------------------------------------------
     BORDER RADIUS
     ------------------------------------------------------------------ */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ------------------------------------------------------------------
     SHADOWS
     ------------------------------------------------------------------ */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.05);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.06), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl:  0 20px 25px rgba(0,0,0,0.07), 0 8px 10px rgba(0,0,0,0.04);
  --shadow-focus: 0 0 0 3px var(--color-primary-ring);
  --shadow-focus-danger: 0 0 0 3px var(--color-danger-border);

  /* ------------------------------------------------------------------
     TYPOGRAPHY
     ------------------------------------------------------------------ */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 14px;
  --text-md:   15px;
  --text-lg:   17px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  30px;
  --text-4xl:  36px;

  --lh-tight:  1.25;
  --lh-snug:   1.375;
  --lh-normal: 1.5;
  --lh-relaxed:1.625;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;

  --ls-tight:  -0.02em;
  --ls-snug:   -0.01em;
  --ls-normal: 0em;
  --ls-wide:   0.02em;
  --ls-wider:  0.05em;
  --ls-widest: 0.1em;

  /* ------------------------------------------------------------------
     TRANSITIONS
     ------------------------------------------------------------------ */
  --ease-default: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:      150ms cubic-bezier(0.4, 0, 1, 1);
  --ease-out:     150ms cubic-bezier(0, 0, 0.2, 1);
  --ease-slow:    300ms cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:  400ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ------------------------------------------------------------------
     Z-INDEX SCALE
     ------------------------------------------------------------------ */
  --z-base:    0;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-topbar:  300;
  --z-sidebar: 400;
  --z-modal:   1100; /* above Bootstrap modal (1050) so seAlert always surfaces */
  --z-toast:   1200;
  --z-tooltip: 1300;
}

/* ------------------------------------------------------------------
   DARK MODE
   Add data-theme="dark" to <html> to activate.
   ------------------------------------------------------------------ */
[data-theme="dark"] {
  --color-bg:               var(--_slate-950);
  --color-surface:          var(--_slate-900);
  --color-page-bg:          var(--_slate-950);
  --color-bg-subtle:        var(--_slate-900);
  --color-bg-muted:         var(--_slate-800);
  --color-bg-overlay:       rgba(0,0,0,0.6);

  --color-border-subtle:    var(--_slate-900);
  --color-border:           var(--_slate-800);
  --color-border-strong:    var(--_slate-700);

  --color-text:             var(--_slate-50);
  --color-text-muted:       var(--_slate-400);
  --color-text-subtle:      var(--_slate-500);
  --color-text-placeholder: var(--_slate-600);
  --color-text-disabled:    var(--_slate-700);

  --topbar-bg:              var(--_slate-900);
  --topbar-border:          var(--_slate-800);
  --topbar-text:            var(--_slate-50);

  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 6px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg:  0 10px 15px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2);
}

/* ------------------------------------------------------------------
   ACCENT SWAP EXAMPLES
   Apply via data-accent="<name>" on <html>.
   ------------------------------------------------------------------ */
[data-accent="emerald"] {
  --color-primary:          #059669;
  --color-primary-hover:    #047857;
  --color-primary-active:   #065f46;
  --color-primary-subtle:   #ecfdf5;
  --color-primary-muted:    #d1fae5;
  --color-primary-ring:     #a7f3d0;
  --color-primary-text:     #065f46;
  --sidebar-active-bar:     #059669;
  --sidebar-active-bg:      rgba(5,150,105,0.12);
  --color-border-focus:     #34d399;
}

[data-accent="violet"] {
  --color-primary:          var(--_violet-600);
  --color-primary-hover:    var(--_violet-700);
  --color-primary-active:   #5b21b6;
  --color-primary-subtle:   var(--_violet-50);
  --color-primary-muted:    var(--_violet-100);
  --color-primary-ring:     #ddd6fe;
  --color-primary-text:     var(--_violet-700);
  --sidebar-active-bar:     var(--_violet-500);
  --sidebar-active-bg:      rgba(139,92,246,0.12);
  --color-border-focus:     #a78bfa;
}

[data-accent="amber"] {
  --color-primary:          var(--_amber-600);
  --color-primary-hover:    var(--_amber-700);
  --color-primary-active:   #92400e;
  --color-primary-subtle:   var(--_amber-50);
  --color-primary-muted:    var(--_amber-100);
  --color-primary-ring:     var(--_amber-200);
  --color-primary-text:     var(--_amber-700);
  --sidebar-active-bar:     var(--_amber-500);
  --sidebar-active-bg:      rgba(245,158,11,0.12);
  --color-border-focus:     var(--_amber-400);
}