/**
 * TEPAT Design Tokens
 * PT Teknologi Energi Utama — Enterprise UI/UX System
 * Single Source of Truth for Colors, Typography, Spacing, Radii, and Shadows
 */

:root {
  /* Header Geometry */
  --header-height: 64px;

  /* --------------------------------------------------------------------------
     1. COLOR SYSTEM (WCAG AA Compliant >= 4.5:1 on light surfaces)
     -------------------------------------------------------------------------- */
  
  /* Brand Accent: Single Primary Brand Color (Indigo / Violet) */
  --brand-50: #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5; /* Primary Accent */
  --brand-700: #4338CA; /* Hover State */
  --brand-800: #3730A3;
  --brand-900: #312E81;
  --brand-glow: rgba(79, 70, 229, 0.20);

  /* Neutral Gray Ramp */
  --gray-25: #FCFCFD;
  --gray-50: #F8FAFC;  /* Canvas background */
  --gray-100: #F1F5F9; /* Subtle surface */
  --gray-200: #E2E8F0; /* Borders, dividers */
  --gray-300: #CBD5E1; /* Input borders */
  --gray-400: #94A3B8; /* Muted text / icons */
  --gray-500: #64748B; /* Secondary body text */
  --gray-600: #475569; /* Primary body text (light) */
  --gray-700: #334155; /* Labels & headings */
  --gray-800: #1E293B; /* High-contrast text */
  --gray-900: #0F172A; /* Headlines */

  /* Semantic Status: Strictly for alerts, badges, and feedback */
  --success-50: #ECFDF5;
  --success-100: #D1FAE5;
  --success-200: #A7F3D0;
  --success-600: #059669;
  --success-700: #047857;

  --warning-50: #FFFBEB;
  --warning-100: #FEF3C7;
  --warning-200: #FDE68A;
  --warning-600: #D97706;
  --warning-700: #B45309;

  --danger-50: #FEF2F2;
  --danger-100: #FEE2E2;
  --danger-200: #FECDD3;
  --danger-600: #DC2626;
  --danger-700: #B91C1C;

  --info-50: #EFF6FF;
  --info-100: #DBEAFE;
  --info-200: #BFDBFE;
  --info-600: #2563EB;
  --info-700: #1D4ED8;

  /* Surfaces & Glass */
  --surface-canvas: var(--gray-50);
  --surface-card: #FFFFFF;
  --surface-card-subtle: var(--gray-100);
  --surface-glass: rgba(255, 255, 255, 0.82);
  --border-card: var(--gray-200);
  --border-subtle: rgba(226, 232, 240, 0.7);

  /* --------------------------------------------------------------------------
     2. TYPOGRAPHY SYSTEM (Reduced to 2 main families + strictly scoped mono)
     -------------------------------------------------------------------------- */
  --font-display: \'Inter Tight\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;
  --font-body: \'Plus Jakarta Sans\', -apple-system, BlinkMacSystemFont, \'Segoe UI\', Roboto, sans-serif;
  --font-mono: \'JetBrains Mono\', monospace; /* STRICTLY for machine IDs like PRJ-2026-005 */

  /* Type Scale: 12 / 14 / 16 / 20 / 28 / 40 px */
  --text-xs: 12px;
  --lh-xs: 16px;

  --text-sm: 14px;
  --lh-sm: 20px;

  --text-base: 16px;
  --lh-base: 24px;

  --text-lg: 20px;
  --lh-lg: 28px;

  --text-xl: 28px;
  --lh-xl: 36px;

  --text-2xl: 40px;
  --lh-2xl: 48px;

  /* --------------------------------------------------------------------------
     3. SPACING SYSTEM (Multiples of 4px)
     -------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  /* --------------------------------------------------------------------------
     4. RADII SYSTEM
     -------------------------------------------------------------------------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-pill: 9999px;

  /* --------------------------------------------------------------------------
     5. SHADOW & FOCUS SYSTEM
     -------------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, 0.05);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.08);
  --shadow-xl: 0 20px 40px rgba(15, 23, 42, 0.12);
  --shadow-focus: 0 0 0 3px rgba(79, 70, 229, 0.25);
  --shadow-focus-danger: 0 0 0 3px rgba(220, 38, 38, 0.25);
}