/* ============================================================
 * SG Construction ERP — CSS Variables & Design System
 * Blue Corporate Theme | Light + Dark Mode | 8px Grid
 * ============================================================ */

:root {
  /* ── Brand Blue ── */
  --primary-50:  #eff6ff; --primary-100: #dbeafe; --primary-200: #bfdbfe;
  --primary-300: #93c5fd; --primary-400: #60a5fa; --primary-500: #3b82f6;
  --primary-600: #2563eb; --primary-700: #1d4ed8; --primary-800: #1e40af;
  --primary-900: #1e3a8a; --primary-950: #172554;

  /* ── Amber Accent ── */
  --accent-300: #fcd34d; --accent-400: #fbbf24; --accent-500: #f59e0b;
  --accent-600: #d97706; --accent-700: #b45309;

  /* ── Semantic ── */
  --success-100: #dcfce7; --success-500: #22c55e; --success-600: #16a34a; --success-700: #15803d;
  --warning-100: #fef3c7; --warning-500: #f59e0b; --warning-600: #d97706;
  --danger-100:  #fee2e2; --danger-500:  #ef4444; --danger-600:  #dc2626;
  --info-100:    #dbeafe; --info-500:    #3b82f6;

  /* ── Neutrals ── */
  --slate-25:  #fcfcfd; --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-850: #172033; --slate-900: #0f172a;
  --slate-950: #020617;

  /* ── Typography ── */
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Inter', sans-serif;
  --font-mono:    'JetBrains Mono', 'Cascadia Code', monospace;

  /* ── Type Scale ── */
  --text-2xs: 0.625rem; --text-xs: 0.75rem; --text-sm: 0.875rem;
  --text-md:  1rem;     --text-lg: 1.125rem; --text-xl: 1.25rem;
  --text-2xl: 1.5rem;   --text-3xl: 1.875rem; --text-4xl: 2.25rem;
  --text-5xl: 3rem;     --text-6xl: 3.75rem;

  /* ── 8px Grid Spacing ── */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.25rem; --space-6: 1.5rem;
  --space-8: 2rem;    --space-10: 2.5rem; --space-12: 3rem;
  --space-16: 4rem;   --space-20: 5rem;   --space-24: 6rem;

  /* ── Radius ── */
  --radius-sm: 0.25rem; --radius-md: 0.5rem;  --radius-lg: 0.75rem;
  --radius-xl: 1rem;    --radius-2xl: 1.5rem; --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,.1), 0 1px 2px -1px rgba(0,0,0,.1);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
  --shadow-glow: 0 0 20px rgba(59,130,246,.25);

  /* ── Transitions ── */
  --tx-fast:   150ms cubic-bezier(.4,0,.2,1);
  --tx-normal: 250ms cubic-bezier(.4,0,.2,1);
  --tx-slow:   400ms cubic-bezier(.4,0,.2,1);

  /* ── Layout ── */
  --sidebar-w:     16.5rem;
  --header-h:      3.75rem;
  --max-w:         80rem;
  --website-max-w: 75rem;
  --z-dropdown:    100; --z-sticky: 200; --z-fixed: 300;
  --z-overlay:     400; --z-modal:  500; --z-toast: 700;
}

/* ── LIGHT THEME (default) ── */
[data-theme="light"], :root {
  --primary:        var(--primary-600);
  --primary-hover:  var(--primary-700);
  --primary-light:  var(--primary-100);
  --accent:         var(--accent-500);

  --bg-base:        #f8fafc;
  --bg-card:        #ffffff;
  --bg-sidebar:     var(--slate-900);
  --bg-header:      rgba(255,255,255,.92);
  --bg-input:       #ffffff;
  --bg-hover:       var(--slate-50);

  --text-primary:   var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-tertiary:  var(--slate-400);
  --text-inverse:   #ffffff;

  --border:         var(--slate-200);
  --border-alt:     var(--slate-300);
  --border-focus:   var(--primary-500);

  --card-shadow:    var(--shadow-sm);
  --card-hover:     var(--shadow-lg);

  /* Website */
  --nav-bg:         rgba(255,255,255,.95);
  --nav-text:       var(--slate-700);
  --nav-active:     var(--primary-600);
  --hero-gradient:  linear-gradient(135deg,var(--primary-900) 0%,var(--primary-700) 55%,var(--primary-600) 100%);
  --section-alt:    var(--slate-50);
  --footer-bg:      var(--slate-900);
  --footer-text:    var(--slate-400);
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --primary:        var(--primary-500);
  --primary-hover:  var(--primary-400);
  --primary-light:  rgba(59,130,246,.15);

  --bg-base:        var(--slate-950);
  --bg-card:        var(--slate-900);
  --bg-sidebar:     var(--slate-950);
  --bg-header:      rgba(15,23,42,.92);
  --bg-input:       var(--slate-800);
  --bg-hover:       var(--slate-850);

  --text-primary:   var(--slate-100);
  --text-secondary: var(--slate-400);
  --text-tertiary:  var(--slate-500);

  --border:         var(--slate-800);
  --border-alt:     var(--slate-700);

  --card-shadow:    0 4px 6px -1px rgba(0,0,0,.3);
  --card-hover:     0 10px 25px -5px rgba(0,0,0,.4);

  --nav-bg:         rgba(15,23,42,.96);
  --nav-text:       var(--slate-300);
  --nav-active:     var(--primary-400);
  --hero-gradient:  linear-gradient(135deg,var(--slate-950) 0%,var(--primary-950) 55%,var(--slate-900) 100%);
  --section-alt:    var(--slate-900);
  --footer-bg:      var(--slate-950);
  --footer-text:    var(--slate-500);
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}