/**
 * XVaultPro Design System - CSS Variables
 * Military-Grade Password Vault - Emerald Theme
 *
 * Color Palette: Emerald Green (#10B981)
 * Differentiates from XColdPro's Cyan (#7DD3E8)
 */

:root {
    /* ==================================================
       BRAND COLORS - EMERALD GREEN
    ================================================== */

    /* Primary Brand Colors */
    --vault-emerald: #10B981;           /* Primary accent */
    --vault-light: #6EE7B7;             /* Light variant */
    --vault-medium: #34D399;            /* Medium variant */
    --vault-dark: #059669;              /* Dark variant */
    --vault-pale: #A7F3D0;              /* Pale/muted variant */

    /* RGB values for alpha compositing */
    --vault-emerald-rgb: 16, 185, 129;
    --vault-light-rgb: 110, 231, 183;
    --vault-medium-rgb: 52, 211, 153;
    --vault-dark-rgb: 5, 150, 105;
    --vault-pale-rgb: 167, 243, 208;

    /* Alias for consistency with XColdPro patterns */
    --accent: var(--vault-emerald);
    --accent-light: var(--vault-light);
    --accent-dark: var(--vault-dark);
    --accent-rgb: var(--vault-emerald-rgb);

    /* ==================================================
       BACKGROUND COLORS
    ================================================== */

    /* Dark Theme Backgrounds */
    --bg-primary: #141414;              /* Main background (Xdripian Black) */
    --bg-secondary: #0a0a0a;            /* Darker sections */
    --bg-tertiary: #1a1a1a;             /* Elevated elements */
    --bg-card: rgba(16, 185, 129, 0.05);/* Card backgrounds */
    --bg-card-hover: rgba(16, 185, 129, 0.08);
    --bg-card-solid: #141414;

    /* Gradient Backgrounds */
    --bg-gradient-hero: linear-gradient(135deg,
        rgba(20, 20, 20, 0.97) 0%,
        rgba(5, 46, 32, 0.4) 100%);
    --bg-gradient-radial: radial-gradient(ellipse at center,
        rgba(16, 185, 129, 0.08) 0%,
        transparent 70%);
    --bg-gradient-glow: radial-gradient(circle,
        rgba(16, 185, 129, 0.05) 0%,
        transparent 70%);
    --bg-gradient-section: linear-gradient(180deg,
        #141414 0%,
        rgba(16, 185, 129, 0.05) 100%);

    /* ==================================================
       TEXT COLORS
    ================================================== */

    --text-primary: #F9F9F9;            /* Main text */
    --text-secondary: #A7F3D0;          /* Secondary text (emerald tint) */
    --text-muted: rgba(167, 243, 208, 0.5);  /* Muted text */
    --text-accent: var(--vault-emerald);     /* Accent text */
    --text-inverse: #141414;            /* Text on light backgrounds */

    /* ==================================================
       BORDER COLORS
    ================================================== */

    --border-default: rgba(16, 185, 129, 0.15);
    --border-light: rgba(16, 185, 129, 0.1);
    --border-medium: rgba(16, 185, 129, 0.3);
    --border-strong: rgba(16, 185, 129, 0.5);
    --border-accent: var(--vault-emerald);

    /* ==================================================
       STATUS COLORS
    ================================================== */

    --success: #10B981;                 /* Same as emerald */
    --success-light: #6EE7B7;
    --success-bg: rgba(16, 185, 129, 0.1);

    --warning: #F59E0B;
    --warning-light: #FCD34D;
    --warning-bg: rgba(245, 158, 11, 0.1);

    --danger: #EF4444;
    --danger-light: #F87171;
    --danger-bg: rgba(239, 68, 68, 0.1);

    --info: #3B82F6;
    --info-light: #60A5FA;
    --info-bg: rgba(59, 130, 246, 0.1);

    /* ==================================================
       TYPOGRAPHY
    ================================================== */

    /* Font Families */
    --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-accent: 'Saira', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

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

    /* Font Sizes (Fluid) */
    --text-xs: 11px;
    --text-sm: 12px;
    --text-base: 15px;
    --text-lg: 17px;
    --text-xl: 20px;
    --text-2xl: 24px;
    --text-3xl: 32px;
    --text-4xl: 48px;
    --text-5xl: 64px;
    --text-6xl: 72px;

    /* Fluid Headings */
    --h1-size: clamp(48px, 6vw, 72px);
    --h2-size: clamp(32px, 4vw, 48px);
    --h3-size: 14px;

    /* Line Heights */
    --leading-none: 0.95;
    --leading-tight: 1.0;
    --leading-snug: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;
    --leading-loose: 1.9;

    /* Letter Spacing */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.05em;
    --tracking-wider: 0.08em;
    --tracking-widest: 0.1em;

    /* ==================================================
       SPACING SCALE (8px base)
    ================================================== */

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --space-32: 128px;

    /* Page Padding */
    --page-padding-x: 60px;
    --page-padding-y: 80px;

    /* ==================================================
       BORDER RADIUS
    ================================================== */

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* ==================================================
       SHADOWS & EFFECTS
    ================================================== */

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 30px rgba(16, 185, 129, 0.1);
    --shadow-xl: 0 10px 40px rgba(16, 185, 129, 0.2);

    /* Glow Effects */
    --glow-sm: 0 0 10px rgba(16, 185, 129, 0.3);
    --glow-md: 0 0 20px rgba(16, 185, 129, 0.3);
    --glow-lg: 0 0 40px rgba(16, 185, 129, 0.5);
    --glow-badge: 0 10px 40px rgba(16, 185, 129, 0.3);

    /* ==================================================
       TRANSITIONS
    ================================================== */

    --transition-fast: 150ms cubic-bezier(0, 0, 0.2, 1);
    --transition-normal: 250ms cubic-bezier(0, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0, 0, 0.2, 1);
    --transition-all: all var(--transition-normal);

    /* ==================================================
       Z-INDEX SCALE
    ================================================== */

    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* ==================================================
       COMPONENT TOKENS
    ================================================== */

    /* Buttons */
    --btn-padding-x: var(--space-6);
    --btn-padding-y: var(--space-3);
    --btn-font-size: 14px;
    --btn-font-weight: var(--font-semibold);
    --btn-radius: var(--radius-md);
    --btn-transition: var(--transition-normal);

    /* Cards */
    --card-padding: var(--space-6);
    --card-radius: var(--radius-lg);
    --card-border: 1px solid var(--border-default);
    --card-bg: var(--bg-card);

    /* Inputs */
    --input-padding-x: var(--space-4);
    --input-padding-y: var(--space-3);
    --input-radius: var(--radius-md);
    --input-border: 1px solid var(--border-default);
    --input-bg: rgba(0, 0, 0, 0.3);

    /* Navbar */
    --navbar-height: 70px;
    --navbar-bg: rgba(20, 20, 20, 0.95);
    --navbar-blur: blur(10px);

    /* ==================================================
       BREAKPOINTS (for reference)
    ================================================== */

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;
}

/* ==================================================
   DARK MODE (default for XVaultPro)
================================================== */

[data-theme="xvaultpro"],
.theme-xvaultpro {
    color-scheme: dark;
}

/* ==================================================
   ANIMATION KEYFRAMES
================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
    }
    50% {
        box-shadow: 0 0 40px rgba(16, 185, 129, 0.5);
    }
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ==================================================
   TIER COLORS (for Gateway & Activation pages)
================================================== */

:root {
    /* Tier-specific colors */
    --tier-free: #6b7280;
    --tier-free-light: #9ca3af;
    --tier-free-bg: rgba(107, 114, 128, 0.1);
    --tier-free-border: rgba(107, 114, 128, 0.3);

    --tier-pro: #10B981;
    --tier-pro-light: #34D399;
    --tier-pro-bg: rgba(16, 185, 129, 0.1);
    --tier-pro-border: rgba(16, 185, 129, 0.3);

    --tier-enterprise: #8b5cf6;
    --tier-enterprise-light: #a78bfa;
    --tier-enterprise-bg: rgba(139, 92, 246, 0.1);
    --tier-enterprise-border: rgba(139, 92, 246, 0.3);

    /* Glass effects */
    --glass-bg: rgba(0, 0, 0, 0.7);
    --glass-bg-light: rgba(0, 0, 0, 0.5);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-blur: 20px;

    /* Glow effects for tiers */
    --glow-free: 0 0 30px rgba(107, 114, 128, 0.3);
    --glow-pro: 0 0 30px rgba(16, 185, 129, 0.4);
    --glow-enterprise: 0 0 30px rgba(139, 92, 246, 0.4);
}