/* ═══════════════════════════════════════════════════════════════
   SIMBALL MANAGER — Design Tokens
   Centralised design tokens for the entire application.
   Load this file in EVERY layout before any other CSS.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand Greens ────────────────────────────────────────── */
  --sb-green-900: #0c5a4e;
  --sb-green-700: #0F6F60;     /* Primary */
  --sb-green-500: #0ac17d;     /* Accent / CTA */
  --sb-green-300: #66ffcc;     /* Highlight */
  --sb-green-100: #e0fff5;     /* Very light tint */

  /* ── Functional Colours ─────────────────────────────────── */
  --sb-danger:       #e74c3c;
  --sb-danger-hover: #c0392b;
  --sb-info:         #3498db;
  --sb-info-hover:   #2980b9;
  --sb-warning:      #E4B313;
  --sb-warning-dark: #88763d;
  --sb-success:      #27ae60;

  /* ── Surfaces ───────────────────────────────────────────── */
  --sb-bg-body:   linear-gradient(to top left, #0F6F60 20%, #212625 60%);
  --sb-bg-dark:   #212625;
  --sb-bg-card:   rgba(255, 255, 255, 0.05);
  --sb-bg-input:  #2e2e42;
  --sb-bg-modal:  rgba(0, 0, 0, 0.45);
  --sb-bg-white:  #ffffff;

  /* ── Text Colours ───────────────────────────────────────── */
  --sb-text-light: #f0f0f0;
  --sb-text-muted: #999999;
  --sb-text-dark:  #333333;
  --sb-text-white: #ffffff;

  /* ── Typography ─────────────────────────────────────────── */
  --sb-font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, sans-serif;
  --sb-font-mono:  'JetBrains Mono', 'Fira Code', monospace;

  /* ── Border Radius ──────────────────────────────────────── */
  --sb-radius-xs:   4px;
  --sb-radius-sm:   6px;
  --sb-radius-md:   8px;
  --sb-radius-lg:   12px;
  --sb-radius-xl:   20px;
  --sb-radius-pill:  9999px;
  --sb-radius-full:  50%;

  /* ── Shadows ────────────────────────────────────────────── */
  --sb-shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.08);
  --sb-shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.10);
  --sb-shadow-md:  0 4px 12px rgba(0, 0, 0, 0.15);
  --sb-shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.20);
  --sb-shadow-xl:  0 12px 36px rgba(0, 0, 0, 0.25);

  /* ── Spacing Scale ──────────────────────────────────────── */
  --sb-space-1:  4px;
  --sb-space-2:  8px;
  --sb-space-3:  12px;
  --sb-space-4:  16px;
  --sb-space-5:  20px;
  --sb-space-6:  24px;
  --sb-space-8:  32px;
  --sb-space-10: 40px;
  --sb-space-12: 48px;

  /* ── Transitions ────────────────────────────────────────── */
  --sb-ease:         0.2s ease;
  --sb-ease-in-out:  0.3s ease-in-out;
  --sb-ease-bounce:  0.18s cubic-bezier(.2,.8,.2,1);

  /* ── Z-Index Scale ──────────────────────────────────────── */
  --sb-z-dropdown: 100;
  --sb-z-sticky:   200;
  --sb-z-overlay:  1000;
  --sb-z-modal:    9999;
  --sb-z-toast:    10000;

  /* ── Legacy Compatibility (aliases) ─────────────────────── */
  --primary-color:        var(--sb-green-500);
  --primary-redcolor:     var(--sb-danger);
  --primary-bluecolor:    var(--sb-info);
  --primary-blackcolor:   var(--sb-bg-dark);
  --primary-orangecolor:  var(--sb-warning);
  --primary-orangecolor-dark: var(--sb-warning-dark);
}