/* ===================================
   TodoSign - SETTINGS PAGE
   Premium Glassmorphism Design
   Typography: Plus Jakarta Sans + DM Sans
   Accent Color: Blue (#06b6d4)

   Namespaced Variables: --set-*

   CONSOLIDATED VERSION - Premium variables
   cascade to all imported modules
=================================== */

/* Base Theme Variables */
@import url('./theme.css');

/* All Settings Styles (Modular) - MUST BE BEFORE OTHER RULES */
@import url('./settings/layout.css');
@import url('./settings/header.css');
@import url('./settings/navigation.css');
@import url('./settings/cards.css');
@import url('./settings/forms.css');
@import url('./settings/buttons.css');
@import url('./settings/components.css');
@import url('./settings/responsive.css');
@import url('./settings/security.css');
@import url('./settings/team.css');
@import url('./settings/notifications.css');
@import url('./settings/light-theme.css');

/* ==================== PREMIUM CSS CUSTOM PROPERTIES ==================== */
:root {
    /* Typography */
    --set-font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --set-font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Override global font variables for settings page */
    --font-heading: var(--set-font-display);
    --font-body: var(--set-font-body);

    /* Blue Palette */
    --set-blue-50: #eff6ff;
    --set-blue-100: #dbeafe;
    --set-blue-200: #bfdbfe;
    --set-blue-300: #93c5fd;
    --set-blue-400: #60a5fa;
    --set-blue-500: #06b6d4;
    --set-blue-600: #6366f1;
    --set-blue-700: #1d4ed8;
    --set-blue-800: #1e40af;
    --set-blue-900: #1e3a8a;

    /* Purple Palette */
    --set-purple-500: #06b6d4;
    --set-purple-600: #6366f1;
    --set-purple-700: #6d28d9;

    /* Semantic Colors */
    --set-accent: #06b6d4;
    --set-accent-hover: #6366f1;
    --set-accent-glow: rgba(6, 182, 212, 0.4);

    /* Supporting Colors */
    --set-emerald: #10b981;
    --set-amber: #f59e0b;
    --set-red: #ef4444;

    /* Navy Palette */
    --set-navy-deep: #0a0f1a;
    --set-navy-dark: #0f172a;
    --set-navy-medium: #1e293b;
    --set-navy-light: #334155;

    /* Glassmorphism */
    --set-glass-bg: rgba(255, 255, 255, 0.03);
    --set-glass-bg-hover: rgba(255, 255, 255, 0.06);
    --set-glass-border: rgba(255, 255, 255, 0.08);
    --set-glass-border-hover: rgba(255, 255, 255, 0.15);
    --set-backdrop-blur: blur(20px);

    /* Shadows - Multi-layer */
    --set-shadow-sm:
        0 1px 2px rgba(0, 0, 0, 0.1),
        0 2px 4px rgba(0, 0, 0, 0.08);
    --set-shadow-md:
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    --set-shadow-lg:
        0 8px 16px rgba(0, 0, 0, 0.15),
        0 16px 32px rgba(0, 0, 0, 0.12),
        0 24px 48px rgba(0, 0, 0, 0.1);
    --set-shadow-glow:
        0 0 20px rgba(6, 182, 212, 0.2),
        0 0 40px rgba(6, 182, 212, 0.1);

    /* Transitions */
    --set-transition: 300ms cubic-bezier(0.4, 0, 0.2, 1);
    --set-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --set-transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Border Radius */
    --set-radius-sm: 8px;
    --set-radius-md: 12px;
    --set-radius-lg: 16px;
    --set-radius-xl: 20px;
    --set-radius-2xl: 24px;
}

/* ==================== KEYFRAME ANIMATIONS ==================== */
@keyframes setFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes setSlideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes setPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

@keyframes setGlowPulse {
    0%, 100% {
        opacity: 0.12;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.18;
        transform: translate(10px, -10px) scale(1.05);
    }
}

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

@keyframes setSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes setCardEntrance {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ==================== PREMIUM ENHANCEMENTS ==================== */

/* Settings page body styling */
body {
    font-family: var(--set-font-body);
}

/* Main Content Premium Styling */
.main-content {
    font-family: var(--set-font-body);
}

/* Enhanced Settings Cards */
.settings-card {
    background: var(--set-glass-bg);
    border: 1px solid var(--set-glass-border);
    border-radius: var(--set-radius-xl);
    backdrop-filter: var(--set-backdrop-blur);
    -webkit-backdrop-filter: var(--set-backdrop-blur);
    transition: all var(--set-transition);
    animation: setCardEntrance 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.settings-card:nth-child(1) { animation-delay: 0.05s; }
.settings-card:nth-child(2) { animation-delay: 0.1s; }
.settings-card:nth-child(3) { animation-delay: 0.15s; }
.settings-card:nth-child(4) { animation-delay: 0.2s; }
.settings-card:nth-child(5) { animation-delay: 0.25s; }
.settings-card:nth-child(6) { animation-delay: 0.3s; }

.settings-card:hover {
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: var(--set-shadow-md);
    transform: translateY(-2px);
}

/* Card Title Premium Font */
.card-title {
    font-family: var(--set-font-display);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Profile Card Premium */
.profile-card {
    backdrop-filter: var(--set-backdrop-blur);
    -webkit-backdrop-filter: var(--set-backdrop-blur);
    animation: setFadeInUp 0.5s ease-out;
}

.profile-name {
    font-family: var(--set-font-display);
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* Personal Info Card Premium */
.personal-info-card {
    backdrop-filter: var(--set-backdrop-blur);
    -webkit-backdrop-filter: var(--set-backdrop-blur);
    transition: all var(--set-transition);
    animation: setFadeInUp 0.5s ease-out 0.1s both;
}

.personal-info-card:hover {
    border-color: rgba(6, 182, 212, 0.3);
    box-shadow: var(--set-shadow-md);
}

.personal-info-title h3 {
    font-family: var(--set-font-display);
    font-weight: 600;
}

/* Input Fields Premium */
.info-field input,
.modern-input,
.form-input {
    transition: all var(--set-transition);
    font-family: var(--set-font-body);
}

.info-field input:focus,
.modern-input:focus,
.form-input:focus {
    border-color: var(--set-accent);
    box-shadow:
        0 0 0 3px rgba(6, 182, 212, 0.15),
        var(--set-shadow-glow);
}

/* Buttons Premium */
.btn-save,
.btn-primary {
    font-family: var(--set-font-body);
    transition: all var(--set-transition);
    position: relative;
    overflow: hidden;
}

.btn-save::before,
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: left 0.5s ease;
}

.btn-save:hover::before,
.btn-primary:hover::before {
    left: 100%;
}

.btn-save:hover,
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.45);
}

/* Navigation Tabs Premium */
.nav-tabs,
.settings-nav {
    backdrop-filter: var(--set-backdrop-blur);
    -webkit-backdrop-filter: var(--set-backdrop-blur);
}

.nav-tab,
.settings-nav-item {
    font-family: var(--set-font-body);
    transition: all var(--set-transition);
}

.nav-tab.active,
.settings-nav-item.active {
    background: linear-gradient(135deg, var(--set-blue-500) 0%, var(--set-purple-500) 100%);
    box-shadow: 0 4px 12px var(--set-accent-glow);
}

/* Section Headers Premium */
.section-title,
.card-header h3 {
    font-family: var(--set-font-display);
    font-weight: 600;
}

/* Toggle Switches Premium */
.toggle-switch {
    transition: all var(--set-transition);
}

.toggle-switch.active {
    background: linear-gradient(135deg, var(--set-blue-500) 0%, var(--set-purple-500) 100%);
}

/* Stats Premium */
.stat-value {
    font-family: var(--set-font-display);
    font-weight: 700;
}

/* Avatar Premium */
.profile-avatar {
    transition: all var(--set-transition-spring);
}

.profile-avatar:hover {
    transform: scale(1.05);
}

/* Form Labels Premium */
.info-field label,
.form-label {
    font-family: var(--set-font-body);
    font-weight: 500;
}

/* Header Section Animation */
.settings-header,
.top-header {
    animation: setFadeIn 0.4s ease-out;
}

/* Hero styles use global /css/hero.css (Glass Card Premium) */

/* Tab Content Animation */
.tab-content.active {
    animation: setFadeInUp 0.4s ease-out;
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .settings-card,
    .profile-card,
    .personal-info-card {
        animation: none;
    }
}

/* ==================== LIGHT THEME PREMIUM ==================== */
[data-theme="light"] {
    --set-glass-bg: rgba(255, 255, 255, 0.7);
    --set-glass-bg-hover: rgba(255, 255, 255, 0.9);
    --set-glass-border: rgba(0, 0, 0, 0.06);
    --set-glass-border-hover: rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .settings-card {
    background: var(--set-glass-bg);
    border-color: var(--set-glass-border);
}

[data-theme="light"] .settings-card:hover {
    background: var(--set-glass-bg-hover);
    border-color: rgba(6, 182, 212, 0.2);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .card-title,
[data-theme="light"] .section-title,
[data-theme="light"] .profile-name {
    color: #0f172a;
}

[data-theme="light"] .card-subtitle,
[data-theme="light"] .profile-role {
    color: #64748b;
}

[data-theme="light"] .hero-title {
    color: #0f172a;
}

[data-theme="light"] .hero-subtitle {
    color: #64748b;
}