/* ================================================================
   ITUM ERP — DESIGN TOKENS
   Ultra-premium enterprise design system
   ================================================================ */

:root {
  /* ── Color Palette: Deep Dark Base ────────────────────────── */
  --color-black:            #000000;
  --color-white:            #ffffff;

  /* Neutral / Surface Scale (cool-tinted dark) */
  --color-gray-950:         #06080d;
  --color-gray-900:         #0b0f19;
  --color-gray-850:         #0f1423;
  --color-gray-800:         #131a2e;
  --color-gray-750:         #172039;
  --color-gray-700:         #1c2744;
  --color-gray-600:         #263354;
  --color-gray-500:         #354669;
  --color-gray-400:         #4e6087;
  --color-gray-300:         #6b7fa3;
  --color-gray-200:         #94a3c3;
  --color-gray-100:         #c0cbdf;
  --color-gray-50:          #e2e8f4;

  /* Accent: Electric Blue / Indigo */
  --color-accent-900:       #1e1b4b;
  --color-accent-800:       #272480;
  --color-accent-700:       #3730a3;
  --color-accent-600:       #4f46e5;
  --color-accent-500:       #6366f1;
  --color-accent:           #6366f1;
  --color-accent-400:       #818cf8;
  --color-accent-300:       #a5b4fc;
  --color-accent-200:       #c7d2fe;
  --color-accent-light:     #818cf8;
  --color-accent-lighter:   #a5b4fc;

  /* Secondary: Royal Purple */
  --color-purple-900:       #2e1065;
  --color-purple-700:       #6d28d9;
  --color-purple-600:       #7c3aed;
  --color-purple-500:       #8b5cf6;
  --color-purple-400:       #a78bfa;
  --color-purple-300:       #c4b5fd;
  --color-purple-light:     #a78bfa;

  /* Tertiary: Vivid Teal */
  --color-teal-900:         #042f2e;
  --color-teal-700:         #0f766e;
  --color-teal-600:         #0d9488;
  --color-teal-500:         #14b8a6;
  --color-teal-400:         #2dd4bf;
  --color-teal-300:         #5eead4;
  --color-teal-light:       #2dd4bf;

  /* Premium Gold */
  --color-gold-900:         #451a03;
  --color-gold-700:         #b45309;
  --color-gold-600:         #d97706;
  --color-gold-500:         #f59e0b;
  --color-gold-400:         #fbbf24;
  --color-gold-300:         #fcd34d;
  --color-gold-light:       #fbbf24;

  /* Semantic */
  --color-success:          #10b981;
  --color-success-light:    #34d399;
  --color-success-muted:    rgba(16, 185, 129, 0.15);
  --color-error:            #ef4444;
  --color-error-light:      #f87171;
  --color-error-muted:      rgba(239, 68, 68, 0.15);
  --color-warning:          #f59e0b;
  --color-warning-light:    #fbbf24;
  --color-warning-muted:    rgba(245, 158, 11, 0.15);
  --color-info:             #3b82f6;
  --color-info-light:       #60a5fa;
  --color-info-muted:       rgba(59, 130, 246, 0.15);

  /* ── Surfaces ─────────────────────────────────────────────── */
  --surface-base:           var(--color-gray-900);
  --surface-raised:         var(--color-gray-850);
  --surface-overlay:        var(--color-gray-800);
  --surface-sunken:         var(--color-gray-950);
  --surface-sidebar:        var(--color-gray-950);
  --surface-header:         rgba(11, 15, 25, 0.82);
  --surface-card:           rgba(19, 26, 46, 0.65);
  --surface-card-hover:     rgba(23, 32, 57, 0.80);
  --surface-glass:          rgba(19, 26, 46, 0.45);
  --surface-modal:          var(--color-gray-800);
  --surface-input:          rgba(6, 8, 13, 0.55);
  --surface-input-focus:    rgba(6, 8, 13, 0.75);

  /* ── Text ──────────────────────────────────────────────────── */
  --text-primary:           #ffffff;
  --text-secondary:         #e2e8f4;
  --text-muted:             #c0cbdf;
  --text-disabled:          #94a3c3;
  --text-accent:            var(--color-accent-300);
  --text-inverse:           var(--color-gray-900);
  --text-link:              var(--color-accent-400);
  --text-link-hover:        var(--color-accent-300);

  /* ── Borders ───────────────────────────────────────────────── */
  --border-primary:         rgba(99, 102, 241, 0.12);
  --border-secondary:       rgba(148, 163, 195, 0.10);
  --border-strong:          rgba(99, 102, 241, 0.25);
  --border-accent:          rgba(99, 102, 241, 0.35);
  --border-glass:           rgba(255, 255, 255, 0.06);
  --border-input:           rgba(148, 163, 195, 0.15);
  --border-input-focus:     var(--color-accent-500);
  --border-error:           var(--color-error);

  /* ── Gradients ─────────────────────────────────────────────── */
  --gradient-accent:        linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --gradient-accent-hover:  linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
  --gradient-accent-subtle: linear-gradient(135deg, rgba(99,102,241,0.15) 0%, rgba(139,92,246,0.15) 100%);
  --gradient-sidebar:       linear-gradient(180deg, #06080d 0%, #0b0f19 50%, #0f1423 100%);
  --gradient-gold:          linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --gradient-teal:          linear-gradient(135deg, #0d9488 0%, #2dd4bf 100%);
  --gradient-glass:         linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
  --gradient-hero:          linear-gradient(135deg, rgba(99,102,241,0.08) 0%, rgba(139,92,246,0.04) 50%, transparent 100%);
  --gradient-shimmer:       linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.04) 50%, transparent 100%);

  /* ── Spacing ───────────────────────────────────────────────── */
  --space-0:   0;
  --space-px:  1px;
  --space-0-5: 0.125rem;
  --space-1:   0.25rem;
  --space-1-5: 0.375rem;
  --space-2:   0.5rem;
  --space-2-5: 0.625rem;
  --space-3:   0.75rem;
  --space-3-5: 0.875rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-7:   1.75rem;
  --space-8:   2rem;
  --space-9:   2.25rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-14:  3.5rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;

  /* ── Typography ────────────────────────────────────────────── */
  --font-family-primary:    'Heebo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-family-display:    'Heebo', 'Segoe UI', system-ui, sans-serif;
  --font-family-en:         'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-family-mono:       'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  --text-2xs:    0.625rem;
  --text-xs:     0.75rem;
  --text-sm:     0.8125rem;
  --text-base:   0.875rem;
  --text-md:     0.9375rem;
  --text-lg:     1rem;
  --text-xl:     1.125rem;
  --text-2xl:    1.25rem;
  --text-3xl:    1.5rem;
  --text-4xl:    1.875rem;
  --text-5xl:    2.25rem;

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

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.02em;
  --tracking-wider:  0.05em;
  --tracking-caps:   0.08em;

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

  /* ── Shadows ───────────────────────────────────────────────── */
  --shadow-xs:    0 1px 2px rgba(0,0,0,0.25);
  --shadow-sm:    0 2px 4px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.15);
  --shadow-md:    0 4px 12px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2);
  --shadow-lg:    0 8px 24px rgba(0,0,0,0.35), 0 4px 8px rgba(0,0,0,0.2);
  --shadow-xl:    0 16px 48px rgba(0,0,0,0.4), 0 8px 16px rgba(0,0,0,0.25);
  --shadow-2xl:   0 24px 64px rgba(0,0,0,0.5), 0 12px 24px rgba(0,0,0,0.3);
  --shadow-glow:  0 0 20px rgba(99,102,241,0.25);
  --shadow-glow-sm: 0 0 10px rgba(99,102,241,0.15);
  --shadow-glow-lg: 0 0 40px rgba(99,102,241,0.3);
  --shadow-inner: inset 0 2px 6px rgba(0,0,0,0.3);

  /* ── Transitions ───────────────────────────────────────────── */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:      cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-out:  cubic-bezier(0.76, 0, 0.24, 1);
  --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:    120ms;
  --duration-base:    200ms;
  --duration-slow:    350ms;
  --duration-slower:  500ms;

  --transition-fast:   all 120ms var(--ease-out);
  --transition-base:   all 200ms var(--ease-out);
  --transition-slow:   all 350ms var(--ease-out);
  --transition-colors: color 200ms var(--ease-out), background-color 200ms var(--ease-out), border-color 200ms var(--ease-out);

  /* ── Z-Index Scale ─────────────────────────────────────────── */
  --z-below:     -1;
  --z-base:       0;
  --z-raised:     1;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-header:     300;
  --z-sidebar:    400;
  --z-backdrop:   500;
  --z-modal:      600;
  --z-toast:      700;
  --z-tooltip:    800;

  /* ── Layout Dimensions ─────────────────────────────────────── */
  --sidebar-width:        260px;
  --sidebar-collapsed:    72px;
  --header-height:        64px;
  --content-max-width:    1440px;
  --content-padding:      var(--space-8);
  --page-padding-x:       var(--space-8);
  --page-padding-y:       var(--space-6);
}