/* ═══════════════════════════════════════════════════════════
   Government Design System - Formal, Luxury, Minimal
   Apple HIG Compliant | WCAG 2.1 AA Accessible | RTL Supported
   ═══════════════════════════════════════════════════════════ */

:root {
    /* ─── Government Color Palette (Formal & Luxury) ─── */
    /* Primary Navy */
    --gov-navy: #0a1e3a;
    --gov-navy-light: #132a47;
    --gov-navy-dark: #061222;

    /* Gold Accents (Premium feel) */
    --gov-gold: #b58a0b;
    --gov-gold-light: #c9a036;
    --gov-gold-dark: #8b6a08;

    /* Surface Colors */
    --gov-surface: #ffffff;
    --gov-surface-elevated: #f8fafc;
    --gov-surface-secondary: #f1f5f9;

    /* Text Colors */
    --gov-text-primary: #0f172a;
    --gov-text-secondary: #475569;
    --gov-text-tertiary: #94a3b8;
    --gov-text-inverse: #ffffff;

    /* Border Colors */
    --gov-border: #e2e8f0;
    --gov-border-light: #f1f5f9;
    --gov-border-strong: #cbd5e1;

    /* ─── Status Colors ─── */
    --gov-success: #10b981;
    --gov-success-bg: #ecfdf3;
    --gov-success-border: #a7f3d0;

    --gov-warning: #f59e0b;
    --gov-warning-bg: #fffbeb;
    --gov-warning-border: #fcd78e;

    --gov-error: #ef4444;
    --gov-error-bg: #fef2f2;
    --gov-error-border: #fecaca;

    --gov-info: #3b82f6;
    --gov-info-bg: #eff6ff;
    --gov-info-border: #bfdbfe;

    /* ─── Typography Scale (Apple HIG) ─── */
    --gov-font-display: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, sans-serif;
    --gov-font-body: 'IBM Plex Sans Arabic', 'Cairo', -apple-system, BlinkMacSystemFont, sans-serif;
    --gov-font-mono: 'SF Mono', 'IBM Plex Mono', monospace;

    /* Sizes (Major Scale - Apple HIG compliant) */
    --gov-text-xs: 0.75rem;      /* 12px */
    --gov-text-sm: 0.875rem;     /* 14px - Body */
    --gov-text-base: 1rem;      /* 16px - Standard */
    --gov-text-lg: 1.125rem;    /* 18px */
    --gov-text-xl: 1.25rem;     /* 20px - Headline */
    --gov-text-2xl: 1.5rem;     /* 24px */
    --gov-text-3xl: 1.875rem;   /* 30px - Title */
    --gov-text-4xl: 2.25rem;    /* 36px - Display */

    /* Weights */
    --gov-font-light: 300;
    --gov-font-regular: 400;
    --gov-font-medium: 500;
    --gov-font-semibold: 600;
    --gov-font-bold: 700;

    /* ─── Spacing Scale (4px Base) ─── */
    --gov-space-0: 0;
    --gov-space-1: 0.25rem;     /* 4px */
    --gov-space-2: 0.5rem;      /* 8px */
    --gov-space-3: 0.75rem;     /* 12px */
    --gov-space-4: 1rem;        /* 16px */
    --gov-space-5: 1.25rem;     /* 20px */
    --gov-space-6: 1.5rem;      /* 24px */
    --gov-space-8: 2rem;        /* 32px */
    --gov-space-10: 2.5rem;     /* 40px */
    --gov-space-12: 3rem;       /* 48px */
    --gov-space-16: 4rem;       /* 64px */
    --gov-space-20: 5rem;       /* 80px */
    --gov-space-24: 6rem;       /* 96px */

    /* ─── Border Radius ─── */
    --gov-radius-sm: 4px;
    --gov-radius-md: 8px;
    --gov-radius-lg: 12px;
    --gov-radius-xl: 16px;
    --gov-radius-2xl: 24px;
    --gov-radius-full: 9999px;

    /* ─── Shadows (Subtle, Professional) ─── */
    --gov-shadow-xs: 0 1px 2px rgba(10, 30, 58, 0.04);
    --gov-shadow-sm: 0 1px 3px rgba(10, 30, 58, 0.06), 0 1px 2px rgba(10, 30, 58, 0.04);
    --gov-shadow-md: 0 4px 12px rgba(10, 30, 58, 0.06), 0 1px 3px rgba(10, 30, 58, 0.04);
    --gov-shadow-lg: 0 8px 24px rgba(10, 30, 58, 0.08), 0 2px 8px rgba(10, 30, 58, 0.04);
    --gov-shadow-xl: 0 16px 48px rgba(10, 30, 58, 0.12);

    /* ─── Transitions (Apple HIG Smooth) ─── */
    --gov-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --gov-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --gov-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    --gov-duration-instant: 0.1s;
    --gov-duration-fast: 0.2s;
    --gov-duration-normal: 0.3s;
    --gov-duration-slow: 0.5s;

    --gov-transition-base: all var(--gov-duration-fast) var(--gov-ease-out);
    --gov-transition-smooth: all var(--gov-duration-normal) var(--gov-ease-in-out);

    /* ─── Z-Index Scale ─── */
    --gov-z-dropdown: 1000;
    --gov-z-sticky: 1020;
    --gov-z-fixed: 1030;
    --gov-z-modal-backdrop: 1040;
    --gov-z-modal: 1050;
    --gov-z-popover: 1060;
    --gov-z-tooltip: 1070;
}

/* ─── Dark Mode ─── */
html[data-theme="dark"] {
    --gov-surface: #1e293b;
    --gov-surface-elevated: #0f172a;
    --gov-surface-secondary: #334155;

    --gov-text-primary: #f1f5f9;
    --gov-text-secondary: #cbd5e1;
    --gov-text-tertiary: #94a3b8;
    --gov-text-inverse: #0f172a;

    --gov-border: #334155;
    --gov-border-light: #1e293b;
    --gov-border-strong: #475569;

    --gov-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
    --gov-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
    --gov-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ─── Reduced Motion (Accessibility) ─── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .drawer,
    .modal,
    .slide,
    .fade {
        animation: none;
        transition: none;
    }
}

/* ─── High Contrast Mode (Accessibility) ─── */
@media (prefers-contrast: high) {
    :root {
        --gov-border: #000000;
        --gov-border-strong: #000000;
        --gov-text-tertiary: var(--gov-text-secondary);
    }

    html[data-theme="dark"] {
        --gov-border: #ffffff;
        --gov-border-strong: #ffffff;
    }
}

/* ─── Focus Styles (Accessibility) ─── */
*:focus-visible {
    outline: 3px solid var(--gov-gold);
    outline-offset: 2px;
    border-radius: var(--gov-radius-sm);
}

*:focus:not(:focus-visible) {
    outline: none;
}

/* ─── Base Styles ─── */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--gov-font-body);
    font-size: var(--gov-text-base);
    font-weight: var(--gov-font-regular);
    line-height: 1.6;
    color: var(--gov-text-primary);
    background-color: var(--gov-surface);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── Typography ─── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--gov-font-display);
    font-weight: var(--gov-font-semibold);
    line-height: 1.2;
    margin-bottom: var(--gov-space-4);
}

h1 { font-size: var(--gov-text-3xl); }
h2 { font-size: var(--gov-text-2xl); }
h3 { font-size: var(--gov-text-xl); }
h4 { font-size: var(--gov-text-lg); }
h5 { font-size: var(--gov-text-base); }
h6 { font-size: var(--gov-text-sm); }

p {
    margin-bottom: var(--gov-space-4);
}

a {
    color: var(--gov-gold);
    text-decoration: none;
    transition: var(--gov-transition-base);
}

a:hover {
    color: var(--gov-gold-light);
}

a:focus-visible {
    outline-offset: 4px;
}

/* ─── Buttons (Apple HIG - 44px minimum) ─── */
.gov-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gov-space-2);
    min-height: 44px;
    min-width: 44px;
    padding: var(--gov-space-3) var(--gov-space-6);
    font-family: var(--gov-font-display);
    font-size: var(--gov-text-sm);
    font-weight: var(--gov-font-semibold);
    border-radius: var(--gov-radius-lg);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--gov-transition-base);
    text-decoration: none;
}

.gov-button--primary {
    background-color: var(--gov-navy);
    color: var(--gov-text-inverse);
}

.gov-button--primary:hover {
    background-color: var(--gov-navy-light);
}

.gov-button--secondary {
    background-color: var(--gov-surface);
    border-color: var(--gov-navy);
    color: var(--gov-navy);
}

.gov-button--secondary:hover {
    background-color: var(--gov-surface-elevated);
    border-color: var(--gov-navy-light);
}

.gov-button--ghost {
    background-color: transparent;
    color: var(--gov-text-primary);
}

.gov-button--ghost:hover {
    background-color: var(--gov-surface-elevated);
}

.gov-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ─── Cards ─── */
.gov-card {
    background-color: var(--gov-surface);
    border: 1px solid var(--gov-border);
    border-radius: var(--gov-radius-lg);
    box-shadow: var(--gov-shadow-sm);
    overflow: hidden;
    transition: var(--gov-transition-base);
}

.gov-card--elevated {
    box-shadow: var(--gov-shadow-md);
}

.gov-card--interactive {
    cursor: pointer;
}

.gov-card--interactive:hover {
    box-shadow: var(--gov-shadow-lg);
    transform: translateY(-2px);
}

/* ─── Loading Skeleton ─── */
.gov-skeleton {
    background: linear-gradient(
        90deg,
        var(--gov-surface-elevated) 25%,
        var(--gov-surface-secondary) 37%,
        var(--gov-surface-elevated) 63%
    );
    background-size: 400% 100%;
    animation: gov-skeleton 1.4s ease infinite;
    border-radius: var(--gov-radius-sm);
}

@keyframes gov-skeleton {
    0% { background-position: 100% 50%; }
    100% { background-position: 0 50%; }
}

.gov-skeleton--text {
    height: var(--gov-text-sm);
    margin-bottom: var(--gov-space-2);
}

.gov-skeleton--heading {
    height: var(--gov-text-xl);
    margin-bottom: var(--gov-space-3);
}

/* ─── Empty States ─── */
.gov-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--gov-space-12);
    text-align: center;
    color: var(--gov-text-tertiary);
}

.gov-empty-state__icon {
    font-size: var(--gov-text-4xl);
    margin-bottom: var(--gov-space-6);
    color: var(--gov-border-strong);
}

.gov-empty-state__title {
    font-size: var(--gov-text-xl);
    font-weight: var(--gov-font-semibold);
    color: var(--gov-text-secondary);
    margin-bottom: var(--gov-space-2);
}

.gov-empty-state__description {
    font-size: var(--gov-text-base);
    max-width: 400px;
}

/* ─── Status Badges ─── */
.gov-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--gov-space-1);
    padding: var(--gov-space-1) var(--gov-space-3);
    font-size: var(--gov-text-xs);
    font-weight: var(--gov-font-semibold);
    border-radius: var(--gov-radius-full);
    line-height: 1;
}

.gov-badge--success {
    background-color: var(--gov-success-bg);
    color: var(--gov-success);
    border: 1px solid var(--gov-success-border);
}

.gov-badge--warning {
    background-color: var(--gov-warning-bg);
    color: var(--gov-warning);
    border: 1px solid var(--gov-warning-border);
}

.gov-badge--error {
    background-color: var(--gov-error-bg);
    color: var(--gov-error);
    border: 1px solid var(--gov-error-border);
}

.gov-badge--info {
    background-color: var(--gov-info-bg);
    color: var(--gov-info);
    border: 1px solid var(--gov-info-border);
}

/* ─── Inputs (Apple HIG - 44px minimum) ─── */
.gov-input {
    width: 100%;
    min-height: 44px;
    padding: var(--gov-space-3) var(--gov-space-4);
    font-family: var(--gov-font-body);
    font-size: var(--gov-text-base);
    color: var(--gov-text-primary);
    background-color: var(--gov-surface);
    border: 2px solid var(--gov-border);
    border-radius: var(--gov-radius-md);
    transition: var(--gov-transition-base);
}

.gov-input::placeholder {
    color: var(--gov-text-tertiary);
}

.gov-input:focus {
    outline: none;
    border-color: var(--gov-navy);
    box-shadow: 0 0 0 3px rgba(10, 30, 58, 0.1);
}

.gov-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: var(--gov-surface-secondary);
}

/* ─── RTL Support ─── */
[dir="rtl"] {
    --gov-ease-out: cubic-bezier(0.54, 0.46, 0.55, 0.94);

    .gov-button {
        flex-direction: row-reverse;
    }

    .gov-badge {
        flex-direction: row-reverse;
    }
}

/* ─── Print Styles ─── */
@media print {
    .gov-button,
    .gov-skeleton,
    .gov-empty-state {
        display: none;
    }

    body {
        background: white;
        color: black;
    }

    .gov-card {
        box-shadow: none;
        border: 1px solid #000;
    }
}