/* ============ DESIGN TOKENS - Korwildik IX ============ */

/* Color Tokens */
:root {
    /* Primary palette */
    --navy: #0a2540;
    --royal-blue: #1e4a7a;
    --gold: #f0b429;
    --slate: #64748b;

    /* Secondary palette */
    --navy-light: #123a63;
    --royal-blue-light: #2c5a94;
    --gold-soft: rgba(240, 180, 41, 0.15);
    --gold-bright: #f5c35e;

    /* Neutrals */
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e0;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #1e293b;
    --gray-800: #0f172a;
    --gray-900: #0a0f1a;

    /* Status colors */
    --success: #10b981;
    --danger: #ef4444;
    --warning: #f59e0b;
    --info: #3b82f6;
}

/* Spacing Scale */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px;

/* Typography Scale */
--font-size-xs: 12px;
--font-size-sm: 13px;
--font-size-base: 14px;
--font-size-lg: 15px;
--font-size-xl: 16px;
--font-size-2xl: 18px;
--font-size-3xl: 24px;
--font-size-4xl: 32px;

--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

--line-height-normal: 1.5;
--line-height-relaxed: 1.625;

/* Border Radius */
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 10px;
--radius-full: 9999px;

/•	box-shadow: 0 4px 20px rgba(10, 37, 64, 0.05);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(10, 37, 64, 0.05);
--shadow-lg: 0 8px 24px rgba(10, 37, 64, 0.1);
--shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.05);

/* Transition */
--transition-fast: 150ms ease;
--transition-normal: 250ms ease;
--transition-slow: 350ms ease;

/* Z-Index */
--z-header: 100;
--z-modal: 1000;
--z-tooltip: 9999;


/* ============================================================
   P3 POLISH - Accessibility & Performance Enhancements
   ========================================================== */

/* Focus-visible outline for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        transition-timing-function: ease-in-out !important;
    }
    .skeleton-loading {
        animation: none !important;
    }
}

/* Image error state */
img {
    display: block;
}

/* Image loading lazy */
img[loading="lazy"] {
    /* Already handled by browser */
}

/* ============================================================
   P3 POLISH - Accessibility & Theme Enhancements
   ========================================================== */

/* Focus-visible outline for keyboard navigation */
*:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
        transition-timing-function: ease-in-out !important;
    }
    .skeleton-loading {
        animation: none !important;
    }
}

/* Dark mode theme */
@media (prefers-color-scheme: dark) {
    :root {
        --navy: #1a0e2e;
        --royal-blue: #2d1b4e;
        --gold: #e8c432;
        --gold-soft: rgba(240, 180, 41, 0.1);
        --gold-bright: #d4b040;
        --slate: #f0f0f5;
        --white: #ffffff;
        --gray-50: #f8fafc;
        --gray-100: #f1f5f9;
        --gray-200: #e2e8f0;
        --gray-300: #cbd5e0;
        --gray-400: #94a3b8;
        --gray-500: #64748b;
        --gray-600: #475569;
        --gray-700: #1e293b;
        --gray-800: #0f172a;
        --gray-900: #0a0f1a;
    }
    
    body {
        background: var(--gray-900);
        color: var(--gray-100);
    }
    
    a {
        color: var(--gold-bright);
    }
    
    /* Adjust table stripes for dark mode */
    .rekap-table-wrapper table tbody tr:nth-child(even) {
        background: rgba(255, 255, 255, 0.05);
    }
    
    .rekap-table-wrapper table tbody tr:hover {
        background: rgba(240, 180, 41, 0.08);
    }
}