/* QUICK REFERENCE - Design Tokens System v2.1 */

/* === COLOR TOKENS === */
/* Brand: --brand-primary, --brand-success, --brand-danger, --brand-warning */
/* Neutral: --neutral-50 (lightest) through --neutral-900 (darkest) */
/* Semantic: --color-bg-*, --color-text-*, --color-border-* */

/* === TYPOGRAPHY === */
/* Sizes: --font-size-sm (14-15px) through --font-size-2xl (24-30px) */
/* Weights: --font-weight-normal (400), --font-weight-semibold (600) */
/* Line Heights: --line-height-tight (1.2), --line-height-base (1.6), --line-height-relaxed (1.8) */

/* === SPACING === */
/* Scale: --space-2xs (4px) through --space-4xl (96px) */
/* Common: --space-md (16px), --space-lg (24px), --space-xl (32px) */

/* === VISUAL EFFECTS === */
/* Shadows: --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl */
/* Radius: --radius-sm (8px), --radius-md (12px), --radius-lg (16px), --radius-xl (24px) */
/* Transitions: --transition-fast (150ms), --transition-base (200ms), --transition-slow (300ms) */

/* === INTERACTION STATES === */
/* Focus: --focus-ring-color, --focus-ring, --focus-offset */
/* Interactive: --state-hover-lift, --state-active-scale */
/* Opacity: --opacity-disabled, --opacity-hover, --opacity-loading */

/* === LAYOUT === */
/* Z-index: --z-dropdown (1000), --z-modal (1050), --z-tooltip (1070) */
/* Breakpoints: --breakpoint-sm (640px) through --breakpoint-2xl (1536px) */

/* === LEGACY ALIASES (DEPRECATED - Remove in v3.0) === */
/* Backward compatibility: --dark-bg-*, --dark-text-*, --dark-accent-* */

/* ============================================== */
/* DESIGN TOKEN SYSTEM - Version 2.1             */
/* ============================================== */

:root {
    /* === BRAND COLORS === */
    --brand-primary: #3b82f6;
    --brand-success: #34d399;        /* Updated for WCAG AA */
    --brand-danger: #dc2626;
    --brand-warning: #f59e0b;
    
    /* === BACKGROUND GRADIENTS === */
    --bg-gradient-primary-start: #1e2838;
    --bg-gradient-primary-end: #0f1729;
    
    /* === DANGER/ERROR STYLING === */
    --brand-danger-secondary: #c9470a;  /* WCAG AA: Darkened from #ea580c to meet 4.5:1 contrast ratio */
    
    /* === NEUTRAL PALETTE === */
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #64748b;
    --neutral-600: #475569;
    --neutral-700: #334155;
    --neutral-800: #1e293b;
    --neutral-900: #0f172a;
    
    /* === SEMANTIC COLORS === */
    --color-bg-primary: var(--neutral-900);
    --color-bg-secondary: var(--neutral-800);
    --color-bg-card: rgba(30, 41, 59, 0.98);
    
    --color-text-primary: var(--neutral-300);
    --color-text-secondary: var(--neutral-400);
    --color-text-muted: var(--neutral-500);
    
    --color-border: rgba(148, 163, 184, 0.15);
    --color-border-hover: rgba(148, 163, 184, 0.3);
    
    /* === LOGO CONTAINER === */
    --bg-logo-container: rgba(51, 65, 85, 0.15);
    --border-logo-subtle: rgba(148, 163, 184, 0.1);
    
    /* === TYPOGRAPHY SCALE === */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    --font-size-base: 1rem;
    --font-size-sm: clamp(0.875rem, 0.875rem + 0.1vw, 0.9375rem);
    --font-size-md: clamp(1rem, 1rem + 0.125vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 1.125rem + 0.125vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 1.25rem + 0.25vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 1.5rem + 0.375vw, 1.875rem);
    
    --font-weight-normal: 400;
    --font-weight-semibold: 600;
    
    --line-height-tight: 1.2;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;
    
    /* === SPACING SCALE === */
    --space-2xs: 0.25rem;    /* 4px */
    --space-xs: 0.5rem;      /* 8px */
    --space-sm: 0.75rem;     /* 12px */
    --space-md: 1rem;        /* 16px */
    --space-lg: 1.5rem;      /* 24px */
    --space-xl: 2rem;        /* 32px */
    --space-2xl: 3rem;       /* 48px */
    --space-3xl: 4rem;       /* 64px */
    --space-4xl: 6rem;       /* 96px */
    
    /* === FILE INPUT ALIGNMENT === */
    --file-input-padding-block: 0.375rem;  /* 6px - Shared value for file input vertical alignment */
    
    /* === SHADOW SCALE === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.3);
    --shadow-danger-md: 0 4px 12px rgba(220, 38, 38, 0.3);
    
    /* === BORDER RADIUS === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    
    /* === TRANSITIONS === */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* === FOCUS STATES === */
    --focus-ring-color: var(--brand-primary);
    --focus-ring-width: 3px;
    --focus-offset: 2px;
    --focus-ring: 0 0 0 var(--focus-ring-width) rgba(59, 130, 246, 0.3);
    --focus-ring-danger: 0 0 0 var(--focus-ring-width) rgba(220, 38, 38, 0.3);
    
    /* === Z-INDEX SCALE === */
    --z-base: 1;
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
    
    /* === OPACITY SCALE === */
    --opacity-disabled: 0.5;
    --opacity-hover: 0.9;
    --opacity-loading: 0.8;  /* WCAG AA: Increased from 0.6 to meet 4.5:1 contrast ratio */
    --opacity-subtle: 0.15;
    
    /* === INTERACTIVE STATES === */
    --state-hover-lift: -1px;
    --state-active-scale: 0.98;
    --state-disabled-opacity: 0.5;
    --state-loading-opacity: 0.6;
    
    /* === ANIMATION DURATIONS === */
    --duration-instant: 100ms;
    --duration-fast: 200ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    
    /* === EASING FUNCTIONS === */
    --easing-linear: linear;
    --easing-ease: ease;
    --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === BREAKPOINTS === */
    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
    
    /* === MICROSOFT BUTTON COLORS === */
    --ms-blue: #2563eb;              /* Base Microsoft blue - 5.2:1 contrast on white */
    --ms-blue-hover: #1d4ed8;        /* Hover state - 6.7:1 contrast */
    --ms-blue-active: #1e40af;       /* Active/pressed state - 7.1:1 contrast */
    
    /* === PRIMARY SHADOWS (for pseudo-element technique) === */
    --shadow-primary-sm: 0 2px 8px rgba(37, 99, 235, 0.2);
    --shadow-primary-md: 0 8px 20px rgba(37, 99, 235, 0.4);
    --shadow-primary-lg: 0 12px 32px rgba(37, 99, 235, 0.5);
    
    /* === GLOW EFFECTS (brand primary) === */
    --glow-primary-sm: 0 0 0 3px rgba(59, 130, 246, 0.15);
    --glow-primary-md: 0 0 0 3px rgba(59, 130, 246, 0.25);
    --glow-primary-lg: 0 0 0 3px rgba(59, 130, 246, 0.3);
    
    /* === CARD GLOW (focus-within effects) === */
    --glow-card-mobile: 0 12px 40px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.1);
    --glow-card-tablet: 0 16px 48px rgba(59, 130, 246, 0.2), 0 0 0 1px rgba(59, 130, 246, 0.15);
    --glow-card-desktop: 0 20px 60px rgba(59, 130, 246, 0.25), 0 0 0 1px rgba(59, 130, 246, 0.2);
    
    /* === NEUTRAL HOVER STATES === */
    --bg-hover-subtle: rgba(148, 163, 184, 0.1);   /* Subtle hover background */
    --bg-active-subtle: rgba(148, 163, 184, 0.15);  /* Subtle active background */
    
    /* === VISUAL FILTERS === */
    --filter-disabled: grayscale(50%);
    --filter-none: grayscale(0%);
    --filter-close-btn-dark: invert(1) grayscale(100%) brightness(200%);
    
    /* === SCALE TRANSFORMS === */
    --scale-hover: 1.02;      /* Subtle hover scale */
    --scale-active: 0.98;     /* Active/pressed scale */
    --scale-focus: 1.005;     /* Barely perceptible focus enhancement */
    --scale-loading: 0.8;     /* Loading spinner initial scale */
    
    /* === COLOR TOKENS (Additional) === */
    --color-white: #ffffff;
    
    /* === LOGO SHADOWS === */
    --shadow-logo-dark: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
    
    /* === LOGO SIZING (Responsive) === */
    --size-logo-mobile-height: min(160px, 30vh);
    --size-logo-mobile-width: min(280px, 85vw);
    --size-logo-tablet-height: min(220px, 35vh);
    --size-logo-tablet-width: min(400px, 70vw);
    
    /* === CARD SIZING === */
    --size-card-tablet-width: min(480px, 90vw);
    --size-card-desktop-width: min(540px, 50vw);
    
    /* === TOUCH TARGETS === */
    --size-touch-target: 48px;
    
    /* === TYPOGRAPHY (Additional) === */
    --letter-spacing-tight: -0.025em;
    
    /* === LEGACY ALIASES (DEPRECATED - Remove in v3.0) === */
    /* @deprecated v3.0 - Use --color-bg-primary instead */
    --dark-bg-primary: var(--neutral-900);
    
    /* @deprecated v3.0 - Use --color-bg-secondary instead */
    --dark-bg-secondary: var(--neutral-800);
    
    /* @deprecated v3.0 - Use --color-bg-card instead */
    --dark-card-bg: var(--color-bg-card);
    
    /* @deprecated v3.0 - Use --color-text-primary instead */
    --dark-text-primary: var(--neutral-300);
    
    /* @deprecated v3.0 - Use --color-text-secondary instead */
    --dark-text-secondary: var(--neutral-400);
    
    /* @deprecated v3.0 - Use --color-text-muted instead */
    --dark-text-muted: var(--neutral-500);
    
    /* @deprecated v3.0 - Use --color-border instead */
    --dark-border: var(--color-border);
    
    /* @deprecated v3.0 - Use appropriate brand color instead */
    --dark-accent-blue: var(--brand-primary);
    --dark-accent-red: var(--brand-danger);
    --dark-accent-green: var(--brand-success);
    --dark-accent-orange: var(--brand-warning);
}

/* ============================================== */
/* ACCESSIBILITY ENHANCEMENTS                    */
/* ============================================== */

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

/* Focus Management */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: var(--focus-offset);
    border-radius: var(--radius-sm);
}

/* Touch Target Sizing */
.btn,
.microsoft-btn,
.feedback-btn,
.help-link,
.btn-close {
    min-height: 44px;
    min-width: 44px;
}

/* Screen Reader Only Utility */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ============================================== */
/* BROWSER FALLBACKS                             */
/* ============================================== */

/* Custom Properties Fallback for older browsers */
@supports not (--css: variables) {
    /* Login card */
    .login-card {
        background: rgba(30, 41, 59, 0.98);
        border: 1px solid rgba(148, 163, 184, 0.15);
        border-radius: 24px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }
    
    /* Microsoft button */
    .microsoft-btn {
        background: #0078d4;
        border: 1px solid #005a9e;
        color: white;
        font-size: 1.125rem;
        font-weight: 600;
        padding: 0.75rem 1.5rem;
        border-radius: 8px;
    }
    
    /* Feedback button */
    .feedback-btn {
        background: linear-gradient(135deg, #34d399, #059669);
        color: white;
        font-weight: 600;
        min-height: 44px;
        border-radius: 12px;
    }
    
    /* Help link */
    .help-link {
        color: #94a3b8;
        font-size: 0.875rem;
    }
    
    /* Welcome text */
    .welcome-text {
        color: #cbd5e1;
        font-size: 1rem;
        font-weight: 400;
    }
}