/**
 * Aetram User Portal — Design Tokens
 * Luxury black + matte gold (enterprise fintech)
 * 8px spacing grid · WCAG-friendly contrast · dark/light themes
 */

@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', 'Segoe UI', system-ui, sans-serif;
    --aetram-font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', ui-monospace, monospace;

    --aetram-text-xs: 11px;
    --aetram-text-sm: 12px;
    --aetram-text-base: 13px;
    --aetram-text-lg: 14px;
    --aetram-text-xl: 16px;
    --aetram-text-2xl: 20px;
    --aetram-text-3xl: 24px;

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

    /* Form controls */
    --aetram-input-height: 38px;
    --aetram-input-padding-y: 8px;
    --aetram-input-padding-x: 14px;

    /* Buttons */
    --aetram-btn-height: 36px;
    --aetram-btn-padding-y: 7px;
    --aetram-btn-padding-x: 18px;

    /* 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: 10px;
    --aetram-radius-lg: 14px;
    --aetram-radius-xl: 18px;
    --aetram-radius-full: 9999px;

    /* Brand — matte luxury gold (not neon yellow) */
    --aetram-gold: #D4AF37;
    --aetram-gold-premium: #C8A64B;
    --aetram-gold-soft: #E6C76A;
    --aetram-gold-dark: #B8860B;
    --aetram-gold-light: #F8E7A0;
    --aetram-gold-1: #B8860B;
    --aetram-gold-2: #D4AF37;
    --aetram-gold-3: #C8A64B;
    --aetram-gold-4: #E6C76A;
    --aetram-gold-solid: #D4AF37;
    --aetram-gold-muted: rgba(212, 175, 55, 0.22);
    --aetram-gold-glow: rgba(212, 175, 55, 0.35);
    --aetram-gradient-gold: linear-gradient(135deg, #B8860B 0%, #D4AF37 45%, #C8A64B 72%, #E6C76A 100%);
    --aetram-gradient-gold-hover: linear-gradient(135deg, #D4AF37 0%, #E6C76A 100%);
    --aetram-gradient-gold-active: linear-gradient(135deg, #9A7209 0%, #B8860B 50%, #C8A64B 100%);
    --aetram-gradient-gold-disabled: linear-gradient(135deg, rgba(184, 134, 11, 0.35) 0%, rgba(212, 175, 55, 0.25) 100%);

    /* Surfaces — charcoal, not pure black (reduced eye strain) */
    --aetram-bg: #0B0B0D;
    --aetram-bg-elevated: #121214;
    --aetram-surface: #17181C;
    --aetram-surface-2: #1F2128;
    --aetram-surface-3: #282A32;
    --aetram-surface-hover: #1F2128;
    --aetram-sidebar: #111114;
    --aetram-header: rgba(17, 17, 20, 0.88);
    --aetram-footer: #111114;

    /* Text */
    --aetram-text: #FFFFFF;
    --aetram-text-secondary: #B7B7B7;
    --aetram-text-muted: #8E8E93;
    --aetram-text-subtle: #6B6B70;
    --aetram-text-inverse: #0B0B0D;
    --aetram-text-on-gold: #111111;

    /* Borders */
    --aetram-border: rgba(212, 175, 55, 0.12);
    --aetram-border-strong: rgba(212, 175, 55, 0.22);
    --aetram-border-subtle: rgba(255, 255, 255, 0.06);
    --aetram-border-focus: rgba(212, 175, 55, 0.65);
    --aetram-border-card: rgba(212, 175, 55, 0.18);

    /* Semantic */
    --aetram-success: #22A06B;
    --aetram-success-muted: rgba(34, 160, 107, 0.16);
    --aetram-danger: #D64545;
    --aetram-danger-muted: rgba(214, 69, 69, 0.16);
    --aetram-warning: #D4A017;
    --aetram-warning-muted: rgba(212, 160, 23, 0.16);
    --aetram-info: #3B6FD4;
    --aetram-info-muted: rgba(59, 111, 212, 0.16);

    /* Inputs */
    --aetram-input-bg: #1A1B20;
    --aetram-input-bg-focus: #1F2128;
    --aetram-input-border: rgba(255, 255, 255, 0.1);
    --aetram-input-placeholder: #6B6B70;

    /* Shadows */
    --aetram-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --aetram-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
    --aetram-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.42);
    --aetram-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5);
    --aetram-shadow-gold: 0 4px 20px rgba(212, 175, 55, 0.22);
    --aetram-shadow-gold-lg: 0 8px 32px rgba(212, 175, 55, 0.28);
    --aetram-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.04);

    /* Motion */
    --aetram-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --aetram-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --aetram-duration-fast: 140ms;
    --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;
    --aetram-z-toast: 11000;

    /* Glass */
    --aetram-glass-bg: rgba(23, 24, 28, 0.72);
    --aetram-glass-bg-strong: rgba(23, 24, 28, 0.88);
    --aetram-glass-blur: blur(16px);
    --aetram-glass-border: rgba(212, 175, 55, 0.14);

    /* Financial number display */
    --aetram-finance-up: var(--aetram-success);
    --aetram-finance-down: var(--aetram-danger);

    /* Auth surfaces */
    --aetram-auth-gradient: radial-gradient(1200px 600px at 15% 10%, rgba(212, 175, 55, 0.12), transparent 55%),
        radial-gradient(900px 500px at 90% 80%, rgba(184, 134, 11, 0.1), transparent 50%),
        linear-gradient(165deg, #0B0B0D 0%, #121214 45%, #0B0B0D 100%);

    /* 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 — enterprise soft grey + gold accent */
[data-theme="light"] {
    color-scheme: light;

    --aetram-bg: #F8F9FB;
    --aetram-bg-elevated: #FFFFFF;
    --aetram-surface: #FFFFFF;
    --aetram-surface-2: #F1F3F7;
    --aetram-surface-3: #E8EBF0;
    --aetram-surface-hover: #F5F6F8;
    --aetram-sidebar: #FFFFFF;
    --aetram-header: rgba(255, 255, 255, 0.92);
    --aetram-footer: #F4F5F7;

    --aetram-text: #111111;
    --aetram-text-secondary: #4A4A4F;
    --aetram-text-muted: #6B6B70;
    --aetram-text-subtle: #909098;
    --aetram-text-inverse: #FFFFFF;
    --aetram-text-on-gold: #111111;

    --aetram-border: rgba(17, 17, 17, 0.08);
    --aetram-border-strong: rgba(17, 17, 17, 0.12);
    --aetram-border-subtle: rgba(17, 17, 17, 0.05);
    --aetram-border-focus: rgba(212, 175, 55, 0.65);
    --aetram-border-card: rgba(212, 175, 55, 0.22);

    --aetram-gold-muted: rgba(212, 175, 55, 0.16);
    --aetram-gold-glow: rgba(212, 175, 55, 0.28);

    --aetram-input-bg: #FFFFFF;
    --aetram-input-bg-focus: #FFFEF9;
    --aetram-input-border: #EAEAEA;
    --aetram-input-placeholder: #909098;

    --aetram-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --aetram-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.07);
    --aetram-shadow-md: 0 10px 28px rgba(15, 23, 42, 0.09);
    --aetram-shadow-lg: 0 20px 48px rgba(15, 23, 42, 0.12);
    --aetram-shadow-gold: 0 4px 18px rgba(212, 175, 55, 0.18);
    --aetram-shadow-gold-lg: 0 8px 28px rgba(212, 175, 55, 0.22);
    --aetram-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9);

    --aetram-glass-bg: rgba(255, 255, 255, 0.78);
    --aetram-glass-bg-strong: rgba(255, 255, 255, 0.92);
    --aetram-glass-border: rgba(212, 175, 55, 0.2);
    --aetram-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.9) inset;

    --aetram-auth-gradient: radial-gradient(1000px 500px at 20% 0%, rgba(212, 175, 55, 0.1), transparent 55%),
        linear-gradient(160deg, #F8F9FB 0%, #F1F3F7 40%, #FAF7EF 100%);
}