/* ========================================
   EasyFile Design System - Token Layer
   Single source of truth for all design values.
   Load FIRST, before any other stylesheet.
   ======================================== */

/* --- Inter font --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ----------------------------------------
   Typography
   ---------------------------------------- */
:root {
    --ef-font: 'Inter', ui-sans-serif, system-ui, "Segoe UI", Roboto, Arial, sans-serif;

    --ef-text-24: 24px;
    --ef-text-18: 18px;
    --ef-text-14: 14px;
    --ef-text-13: 13px;
    --ef-text-12: 12px;
    --ef-text-11: 11px;

    /* Spacing */
    --ef-space-4: 4px;
    --ef-space-8: 8px;
    --ef-space-12: 12px;
    --ef-space-16: 16px;
    --ef-space-24: 24px;
    --ef-space-32: 32px;

    /* Border Radius */
    --ef-radius-4: 4px;
    --ef-radius-6: 6px;
    --ef-radius-10: 10px;
    --ef-radius-14: 14px;

    /* Elevation */
    --ef-shadow-1: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --ef-shadow-2: 0 4px 12px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);

    /* Primary */
    --ef-color-primary: #2563eb;
    --ef-color-primary-hover: #1d4ed8;
    --ef-color-primary-active: #1e40af;
    --ef-color-primary-bg: rgba(37,99,235,0.08);
    --ef-color-primary-light: rgba(37,99,235,0.25);
    --ef-color-primary-disabled: #93c5fd;
    --ef-color-focus: rgba(37,99,235,0.4);

    /* Danger */
    --ef-color-danger: #dc2626;
    --ef-color-danger-hover: #b91c1c;

    /* Semantic colors (solid + bg tint + text) */
    --ef-green: #16a34a;
    --ef-green-bg: rgba(22,163,74,0.08);
    --ef-green-text: #15803d;

    --ef-yellow: #d97706;
    --ef-yellow-bg: rgba(217,119,6,0.08);
    --ef-yellow-text: #b45309;

    --ef-red: #dc2626;
    --ef-red-bg: rgba(220,38,38,0.08);
    --ef-red-text: #b91c1c;

    --ef-blue: #2563eb;
    --ef-blue-bg: rgba(37,99,235,0.08);
    --ef-blue-text: #1d4ed8;
}

/* ----------------------------------------
   Light Theme (default)
   ---------------------------------------- */
:root,
[data-theme="light"] {
    --ef-bg: #f8f9fb;
    --ef-surface: #ffffff;
    --ef-surface-2: #f1f3f5;
    --ef-surface-3: #e9ecef;
    --ef-text: #1e293b;
    --ef-text-muted: #64748b;
    --ef-text-placeholder: #94a3b8;
    --ef-text-on-primary: #ffffff;
    --ef-text-link: #2563eb;
    --ef-border: #e2e8f0;
    --ef-border-strong: #cbd5e1;

    /* App-specific surfaces */
    --ef-file-card-header: #dbeafe;
    --ef-file-card-active-bg: #eff6ff;
    --ef-file-card-active-shadow: rgba(37,99,235,0.2);
    --ef-file-card-actions-bg: var(--ef-surface-2);
    --ef-input-focus-bg: #fefce8;
    --ef-drag-over-bg: #dbeafe;
    --ef-highlight-bg: #fef9c3;
    --ef-progress-bg: #dcfce7;
    --ef-progress-text: #166534;
    --ef-progress-border: #bbf7d0;
    --ef-error-bg: #fef2f2;
    --ef-error-text: #991b1b;
    --ef-error-border: #fecaca;
    --ef-scrollbar-thumb: var(--ef-border-strong);
    --ef-scrollbar-hover: #94a3b8;
}

/* ----------------------------------------
   Dark Theme
   ---------------------------------------- */
[data-theme="dark"] {
    --ef-bg: #0f172a;
    --ef-surface: #1e293b;
    --ef-surface-2: #253249;
    --ef-surface-3: #334155;
    --ef-text: #e2e8f0;
    --ef-text-muted: #94a3b8;
    --ef-text-placeholder: #64748b;
    --ef-text-on-primary: #ffffff;
    --ef-text-link: #60a5fa;
    --ef-border: #334155;
    --ef-border-strong: #475569;

    --ef-color-primary: #3b82f6;
    --ef-color-primary-hover: #60a5fa;
    --ef-color-primary-active: #2563eb;
    --ef-color-primary-bg: rgba(59,130,246,0.15);
    --ef-color-primary-light: rgba(59,130,246,0.3);
    --ef-color-primary-disabled: #1e3a5f;
    --ef-color-focus: rgba(59,130,246,0.5);

    --ef-color-danger: #ef4444;
    --ef-color-danger-hover: #f87171;

    --ef-green: #22c55e;
    --ef-green-bg: rgba(34,197,94,0.12);
    --ef-green-text: #86efac;
    --ef-yellow: #f59e0b;
    --ef-yellow-bg: rgba(245,158,11,0.12);
    --ef-yellow-text: #fbbf24;
    --ef-red: #ef4444;
    --ef-red-bg: rgba(239,68,68,0.12);
    --ef-red-text: #fca5a5;
    --ef-blue: #3b82f6;
    --ef-blue-bg: rgba(59,130,246,0.12);
    --ef-blue-text: #93c5fd;

    --ef-shadow-1: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
    --ef-shadow-2: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);

    --ef-file-card-header: #1e3a5f;
    --ef-file-card-active-bg: #172554;
    --ef-file-card-active-shadow: rgba(59,130,246,0.3);
    --ef-file-card-actions-bg: var(--ef-surface-2);
    --ef-input-focus-bg: #422006;
    --ef-drag-over-bg: #172554;
    --ef-highlight-bg: #713f12;
    --ef-progress-bg: #052e16;
    --ef-progress-text: #86efac;
    --ef-progress-border: #166534;
    --ef-error-bg: #450a0a;
    --ef-error-text: #fca5a5;
    --ef-error-border: #991b1b;
    --ef-scrollbar-thumb: var(--ef-border-strong);
    --ef-scrollbar-hover: #64748b;
}

/* ----------------------------------------
   Navigation Themes
   ---------------------------------------- */
[data-nav="light"] {
    --nav-bg: #ffffff;
    --nav-bg-2: #f8f9fb;
    --nav-text: #64748b;
    --nav-text-active: #1e293b;
    --nav-hover: rgba(0,0,0,0.04);
    --nav-active-bg: var(--ef-color-primary-bg);
    --nav-active-text: var(--ef-color-primary);
    --nav-accent: var(--ef-color-primary);
    --nav-divider: #e2e8f0;
    --nav-border: #e2e8f0;
    --nav-brand: #1e293b;
    --header-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

[data-nav="soft"] {
    --nav-bg: #f0f4f8;
    --nav-bg-2: #e8edf2;
    --nav-text: #475569;
    --nav-text-active: #1e293b;
    --nav-hover: rgba(0,0,0,0.05);
    --nav-active-bg: var(--ef-color-primary-bg);
    --nav-active-text: var(--ef-color-primary);
    --nav-accent: var(--ef-color-primary);
    --nav-divider: #d5dce4;
    --nav-border: #d5dce4;
    --nav-brand: #1e293b;
    --header-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

[data-nav="slate"] {
    --nav-bg: #1e293b;
    --nav-bg-2: #263448;
    --nav-text: #94a3b8;
    --nav-text-active: #f1f5f9;
    --nav-hover: rgba(255,255,255,0.06);
    --nav-active-bg: rgba(59,130,246,0.15);
    --nav-active-text: #60a5fa;
    --nav-accent: #60a5fa;
    --nav-divider: #334155;
    --nav-border: #334155;
    --nav-brand: #f1f5f9;
    --header-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

[data-nav="dark"] {
    --nav-bg: #0f172a;
    --nav-bg-2: #162033;
    --nav-text: #94a3b8;
    --nav-text-active: #e2e8f0;
    --nav-hover: rgba(255,255,255,0.05);
    --nav-active-bg: rgba(59,130,246,0.15);
    --nav-active-text: #60a5fa;
    --nav-accent: #60a5fa;
    --nav-divider: #1e293b;
    --nav-border: #1e293b;
    --nav-brand: #e2e8f0;
    --header-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* ----------------------------------------
   Reduced Motion
   ---------------------------------------- */
@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;
    }
}