/**
 * Aetram User Portal — Design Tokens
 * Global CSS variables for theme management (8px grid, enterprise palette)
 */

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

:root {
    /* Typography */
    --aetram-font-sans: 'Inter', 'Segoe UI', 'Poppins', system-ui, -apple-system, sans-serif;
    --aetram-font-display: 'Inter', 'Nunito', 'Segoe UI', sans-serif;

    --aetram-text-xs: 10px;
    --aetram-text-sm: 12px;
    --aetram-text-base: 12px;
    --aetram-text-lg: 14px;
    --aetram-text-xl: 16px;
    --aetram-text-2xl: 18px;

    --aetram-leading-tight: 1.25;
    --aetram-leading-normal: 1.5;

    /* Form controls — compact height */
    --aetram-input-height: 34px;
    --aetram-input-padding-y: 6px;
    --aetram-input-padding-x: 12px;

    /* Buttons — compact height (aligned with inputs) */
    --aetram-btn-height: 30px;
    --aetram-btn-padding-y: 5px;
    --aetram-btn-padding-x: 14px;

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

    /* Radius */
    --aetram-radius-sm: 6px;
    --aetram-radius-md: 8px;
    --aetram-radius-lg: 12px;
    --aetram-radius-xl: 16px;
    --aetram-radius-full: 9999px;

    /* Brand — gold gradient preserved */
    --aetram-gold-1: rgba(201, 143, 48, 1);
    --aetram-gold-2: rgba(245, 233, 125, 1);
    --aetram-gold-3: rgba(190, 128, 43, 1);
    --aetram-gold-4: rgba(226, 190, 89, 1);
    --aetram-gold-solid: #c9a227;
    --aetram-gold-muted: rgba(201, 162, 39, 0.35);
    --aetram-gradient-gold: linear-gradient(90deg, var(--aetram-gold-1) 0%, var(--aetram-gold-2) 33%, var(--aetram-gold-3) 67%, var(--aetram-gold-4) 100%);
    --aetram-gradient-gold-hover: linear-gradient(90deg, var(--aetram-gold-1) 0%, var(--aetram-gold-2) 100%);

    /* Surfaces — dark enterprise */
    --aetram-bg: #0b0f14;
    --aetram-bg-elevated: #111820;
    --aetram-surface: #1a222d;
    --aetram-surface-2: #222c3a;
    --aetram-surface-3: #2a3544;
    --aetram-sidebar: #151b24;
    --aetram-header: rgba(21, 27, 36, 0.88);
    --aetram-footer: #151b24;

    /* Text */
    --aetram-text: #f1f5f9;
    --aetram-text-secondary: #cbd5e1;
    --aetram-text-muted: #94a3b8;
    --aetram-text-subtle: #64748b;
    --aetram-text-inverse: #0f172a;

    /* Borders */
    --aetram-border: rgba(255, 255, 255, 0.08);
    --aetram-border-strong: rgba(255, 255, 255, 0.14);
    --aetram-border-focus: rgba(201, 162, 39, 0.55);

    /* Semantic */
    --aetram-success: #22c55e;
    --aetram-success-muted: rgba(34, 197, 94, 0.15);
    --aetram-danger: #ef4444;
    --aetram-danger-muted: rgba(239, 68, 68, 0.15);
    --aetram-warning: #f59e0b;
    --aetram-info: #3b82f6;

    /* Inputs */
    --aetram-input-bg: #1e2733;
    --aetram-input-bg-focus: #243040;
    --aetram-input-border: var(--aetram-border-strong);
    --aetram-input-placeholder: #64748b;

    /* Shadows */
    --aetram-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.24);
    --aetram-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.28);
    --aetram-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.32);
    --aetram-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4);
    --aetram-shadow-gold: 0 4px 16px rgba(201, 162, 39, 0.22);

    /* Motion */
    --aetram-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --aetram-duration-fast: 150ms;
    --aetram-duration: 220ms;
    --aetram-duration-slow: 320ms;

    /* Z-index scale */
    --aetram-z-header: 100;
    --aetram-z-dropdown: 200;
    --aetram-z-modal: 1050;
    --aetram-z-overlay: 10000;

    /* Glass */
    --aetram-glass-bg: rgba(26, 34, 45, 0.72);
    --aetram-glass-blur: blur(14px);

    /* i18n font stacks */
    --aetram-font-ar: 'Noto Sans Arabic', var(--aetram-font-sans);
    --aetram-font-hi: 'Noto Sans Devanagari', var(--aetram-font-sans);
    --aetram-font-ta: 'Noto Sans Tamil', var(--aetram-font-sans);
}

/* Default / explicit dark theme */
:root,
[data-theme="dark"] {
    color-scheme: dark;
}

/* Light theme token overrides */
[data-theme="light"] {
    color-scheme: light;

    --aetram-bg: #f4f6f9;
    --aetram-bg-elevated: #ffffff;
    --aetram-surface: #ffffff;
    --aetram-surface-2: #f1f5f9;
    --aetram-surface-3: #e2e8f0;
    --aetram-sidebar: #ffffff;
    --aetram-header: rgba(255, 255, 255, 0.92);
    --aetram-footer: #f8fafc;

    --aetram-text: #0f172a;
    --aetram-text-secondary: #334155;
    --aetram-text-muted: #64748b;
    --aetram-text-subtle: #94a3b8;
    --aetram-text-inverse: #f8fafc;

    --aetram-border: rgba(15, 23, 42, 0.08);
    --aetram-border-strong: rgba(15, 23, 42, 0.14);
    --aetram-border-focus: rgba(201, 162, 39, 0.55);

    --aetram-input-bg: #ffffff;
    --aetram-input-bg-focus: #f8fafc;
    --aetram-input-placeholder: #94a3b8;

    --aetram-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --aetram-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
    --aetram-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.1);
    --aetram-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12);

    --aetram-glass-bg: rgba(255, 255, 255, 0.72);
    --aetram-glass-border: rgba(255, 255, 255, 0.65);
    --aetram-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.1), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
    --aetram-auth-gradient: linear-gradient(145deg, #e8edf4 0%, #f4f7fb 38%, #faf6ee 72%, #f0f4f8 100%);
}