/**
 * 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)
     -------------------------------------------------------------------------- */
  
  /* PLN Corporate Brand Color System (Official PLN Blue #0072BC & Deep Navy #00529C) */
  --brand-50: #F0F7FF;
  --brand-100: #E0EFFE;
  --brand-200: #BAE0FD;
  --brand-300: #7CC5FA;
  --brand-400: #38A4F6;
  --brand-500: #0C85E9;
  --brand-600: #0072BC; /* Official PLN Corporate Blue (Primary Accent) */
  --brand-700: #005B98; /* Hover & Active State */
  --brand-800: #00529C; /* PLN Deep Corporate Navy */
  --brand-900: #00386B; /* PLN Deepest Navy */
  --brand-glow: rgba(0, 114, 188, 0.18);

  /* PLN Energy Gold / Secondary Accent */
  --pln-yellow-50: #FFFDF0;
  --pln-yellow-100: #FFF9C2;
  --pln-yellow-400: #FED100; /* Official PLN Yellow */
  --pln-yellow-500: #F5A623; /* PLN Warm Energy Gold */
  --pln-yellow-600: #D98200;

  /* PLN Red / Safety First (Petir PLN) */
  --pln-red-500: #ED1C24; /* Official PLN Red */
  --pln-red-600: #DC2626;

  /* PLN Icon Plus / Indonesia Power Teal */
  --pln-teal-500: #0095A8;
  --pln-teal-600: #00828A;

  /* 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(0, 114, 188, 0.25);
  --shadow-focus-danger: 0 0 0 3px rgba(237, 28, 36, 0.25);
}