/* ===== STOU CMS Design Tokens ===== */

:root {
  /* Brand Colors */
  --color-primary-900: #1a0533;
  --color-primary-800: #2d0a5c;
  --color-primary-700: #3d1480;
  --color-primary-600: #4c20a0;
  --color-primary-500: #5b2fc0;
  --color-primary-400: #7c52d4;
  --color-primary-300: #9d77e8;
  --color-primary-200: #c4adf5;
  --color-primary-100: #ece5ff;
  --color-primary-50:  #f7f4ff;

  --color-indigo-600: #3730a3;
  --color-indigo-500: #4338ca;
  --color-indigo-400: #6366f1;

  --color-gold-600: #d97706;
  --color-gold-500: #f59e0b;
  --color-gold-400: #fbbf24;
  --color-gold-100: #fef3c7;

  --color-success-600: #059669;
  --color-success-500: #10b981;
  --color-success-100: #d1fae5;

  --color-warning-600: #d97706;
  --color-warning-500: #f59e0b;
  --color-warning-100: #fef3c7;

  --color-danger-600: #dc2626;
  --color-danger-500: #ef4444;
  --color-danger-100: #fee2e2;

  --color-info-600: #0284c7;
  --color-info-500: #0ea5e9;
  --color-info-100: #e0f2fe;

  /* Chart palette (8 departments) */
  --chart-1: #6366f1;
  --chart-2: #f59e0b;
  --chart-3: #10b981;
  --chart-4: #ef4444;
  --chart-5: #8b5cf6;
  --chart-6: #06b6d4;
  --chart-7: #f97316;
  --chart-8: #84cc16;

  /* Spacing scale */
  --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;

  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);
  --shadow-glow: 0 0 30px rgba(91,47,192,0.3);
  --shadow-glow-gold: 0 0 20px rgba(245,158,11,0.4);

  /* Typography */
  --font-sans: 'Noto Sans Thai', 'Noto Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'Courier New', monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --font-light:  300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semi:   600;
  --font-bold:   700;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-spring: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Z-index */
  --z-base:    1;
  --z-dropdown:100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
  --z-tooltip: 500;

  /* Sidebar */
  --sidebar-width: 260px;
  --topbar-height: 64px;
}

/* ===== LIGHT THEME (default) ===== */
[data-theme="light"], :root {
  --bg-base:     #f8f7ff;
  --bg-surface:  #ffffff;
  --bg-surface2: #f3f0ff;
  --bg-elevated: #ffffff;
  --bg-overlay:  rgba(248,247,255,0.85);

  --border-color:   #e5e0f8;
  --border-strong:  #c4b5fd;

  --text-primary:  #1a0533;
  --text-secondary:#4b3a7a;
  --text-muted:    #7c6ba0;
  --text-disabled: #b8afd4;
  --text-inverse:  #ffffff;

  --sidebar-bg:    #1a0533;
  --sidebar-text:  rgba(255,255,255,0.7);
  --sidebar-active:#ffffff;
  --sidebar-hover: rgba(255,255,255,0.08);
  --sidebar-accent:#f59e0b;

  --topbar-bg:    #ffffff;
  --topbar-border:#e5e0f8;

  --input-bg:     #ffffff;
  --input-border: #c4b5fd;
  --input-focus:  #5b2fc0;

  --card-bg:      #ffffff;
  --card-border:  #e5e0f8;
  --card-shadow:  0 2px 8px rgba(91,47,192,0.08);

  --glass-bg:     rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.8);
  --glass-blur:   blur(20px);

  --badge-bg:     rgba(91,47,192,0.1);
  --badge-text:   #5b2fc0;

  --progress-track: #e5e0f8;

  --table-header:  #f3f0ff;
  --table-row-alt: #faf8ff;
  --table-border:  #e5e0f8;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg-base:     #0f0f1a;
  --bg-surface:  #1a1a2e;
  --bg-surface2: #16213e;
  --bg-elevated: #222240;
  --bg-overlay:  rgba(15,15,26,0.9);

  --border-color:  #2d2d52;
  --border-strong: #4c4c8a;

  --text-primary:  #f0eeff;
  --text-secondary:#c4b5fd;
  --text-muted:    #8b7bb8;
  --text-disabled: #4a4070;
  --text-inverse:  #1a0533;

  --sidebar-bg:    #0d0d1f;
  --sidebar-text:  rgba(255,255,255,0.6);
  --sidebar-active:#ffffff;
  --sidebar-hover: rgba(255,255,255,0.06);
  --sidebar-accent:#f59e0b;

  --topbar-bg:    #1a1a2e;
  --topbar-border:#2d2d52;

  --input-bg:     #222240;
  --input-border: #3d3d70;
  --input-focus:  #7c52d4;

  --card-bg:      #1a1a2e;
  --card-border:  #2d2d52;
  --card-shadow:  0 2px 8px rgba(0,0,0,0.3);

  --glass-bg:     rgba(26,26,46,0.7);
  --glass-border: rgba(255,255,255,0.08);
  --glass-blur:   blur(20px);

  --badge-bg:     rgba(124,82,212,0.2);
  --badge-text:   #c4b5fd;

  --progress-track: #2d2d52;

  --table-header:  #222240;
  --table-row-alt: #1e1e36;
  --table-border:  #2d2d52;
}