/* ============================================================
   AdminStudio Design Tokens - Frosted Glass Edition
   Premium iOS-inspired design system with glass morphism
   ============================================================ */

:root {
  /* ============================================================
     CORE COLOR SYSTEM - Dark Mode (Default)
     ============================================================ */
  
  /* Text colors */
  --ink:        rgba(255, 255, 255, 0.95);
  --ink-dim:    rgba(255, 255, 255, 0.75);
  --ink-muted:  rgba(255, 255, 255, 0.6);
  
  /* Base backgrounds */
  --bg:         #0f1522;      /* Solid background for main areas */
  --bg-overlay: rgba(15, 21, 34, 0.95); /* Semi-transparent overlay */
  
  /* Panel colors - Frosted glass variations */
  --panel:      rgba(255, 255, 255, 0.08);  /* Primary frosted glass */
  --panel-2:    rgba(255, 255, 255, 0.12);  /* Elevated frosted glass */
  --panel-3:    rgba(255, 255, 255, 0.06);  /* Subtle frosted glass */
  --panel-hover: rgba(255, 255, 255, 0.15); /* Hover state */
  
  /* Solid panels (for contrast when needed) */
  --panel-solid:   #131a28;
  --panel-solid-2: #1a2030;
  --panel-solid-3: #101521;
  
  /* Strokes/borders */
  --stroke:     rgba(255, 255, 255, 0.15);
  --stroke-2:   rgba(255, 255, 255, 0.08);
  --stroke-subtle: rgba(255, 255, 255, 0.05);
  --stroke-strong: rgba(255, 255, 255, 0.25);
  
  /* Accent colors - iOS style */
  --blue:       #0A84FF;
  --blue-light: rgba(10, 132, 255, 0.15);
  --blue-glow:  rgba(10, 132, 255, 0.3);
  
  --green:      #34C759;
  --green-light: rgba(52, 199, 89, 0.15);
  
  --red:        #FF3B30;
  --red-light:  rgba(255, 59, 48, 0.15);
  
  --orange:     #FF9500;
  --orange-light: rgba(255, 149, 0, 0.15);
  
  --yellow:     #FFCC00;
  --yellow-light: rgba(255, 204, 0, 0.15);
  
  --purple:     #BF5AF2;
  --purple-light: rgba(191, 90, 242, 0.15);
  
  /* State colors */
  --info:       var(--blue);
  --success:    var(--green);
  --danger:     var(--red);
  --warning:    var(--orange);
  
  /* ============================================================
     FROSTED GLASS SYSTEM
     ============================================================ */
  
  /* Backdrop filters - strength levels */
  --blur-light:  blur(20px) saturate(1.5);
  --blur-medium: blur(40px) saturate(1.8) brightness(1.1);
  --blur-heavy:  blur(60px) saturate(2.0) brightness(1.2);
  
  /* Glass backgrounds - apply with backdrop-filter */
  --glass-subtle:  rgba(255, 255, 255, 0.06);
  --glass-light:   rgba(255, 255, 255, 0.08);
  --glass-medium:  rgba(255, 255, 255, 0.12);
  --glass-strong:  rgba(255, 255, 255, 0.18);
  --glass-intense: rgba(255, 255, 255, 0.25);
  
  /* Inset highlights for depth */
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  --inset-shadow:    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  
  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  
  /* Standard shadows */
  --shadow:        0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-sm:     0 4px 12px rgba(0, 0, 0, 0.2);
  --shadow-md:     0 12px 32px rgba(0, 0, 0, 0.35);
  --shadow-lg:     0 20px 48px rgba(0, 0, 0, 0.4);
  --shadow-xl:     0 24px 64px rgba(0, 0, 0, 0.5);
  
  /* Colored shadows */
  --shadow-blue:   0 8px 24px rgba(10, 132, 255, 0.3);
  --shadow-green:  0 8px 24px rgba(52, 199, 89, 0.3);
  --shadow-red:    0 8px 24px rgba(255, 59, 48, 0.3);
  
  /* Card shadows with glass */
  --shadow-glass:  0 20px 60px rgba(0, 0, 0, 0.3),
                   inset 0 1px 0 rgba(255, 255, 255, 0.2);
  
  /* Elevation system */
  --elev-1: rgba(255, 255, 255, 0.08);  /* Base glass */
  --elev-2: rgba(255, 255, 255, 0.12);  /* Elevated glass */
  --elev-3: rgba(255, 255, 255, 0.16);  /* High elevation glass */
  
  /* ============================================================
     GEOMETRY / SPACING
     ============================================================ */
  
  /* Border radius */
  --radius:    12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-pill: 999px;
  
  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  
  /* Grid gaps */
  --gap-xs: 6px;
  --gap-sm: 10px;
  --gap-md: 14px;
  --gap-lg: 20px;
  --gap-xl: 32px;
  
  /* Padding */
  --pad-xs: 6px;
  --pad-sm: 10px;
  --pad-md: 14px;
  --pad-lg: 20px;
  --pad-xl: 32px;
  
  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  
  /* Font families */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, "Courier New", monospace;
  
  /* Font sizes */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 32px;
  --text-4xl: 44px;
  
  /* Font weights */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-heavy:   800;
  
  /* Line heights */
  --leading-tight: 1.2;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;
  
  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.03em;
  
  /* ============================================================
     ANIMATION / TIMING
     ============================================================ */
  
  /* Duration */
  --t-fast:   0.15s;
  --t-medium: 0.3s;
  --t-slow:   0.5s;
  
  /* Easing curves */
  --ease-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ============================================================
     LAYOUT / Z-INDEX
     ============================================================ */
  
  /* Z-index scale */
  --z-base:     1;
  --z-raised:   10;
  --z-header:   1000;
  --z-modal:    10000;
  --z-overlay:  12000;
  --z-toast:    15000;
  --z-max:      99999;
  
  /* Menu system */
  --menu-width: 296px;
  --menu-z:     10000;
  --menu-z-btn: 10001;
  
  /* Safe areas (iOS) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  
  /* Layout dimensions */
  --header-height: 56px;
  --dock-height:   68px;
  --mobile-dock:   68px;
}

/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */

:root[data-theme="light"] {
  /* Text colors */
  --ink:        rgba(26, 26, 28, 0.95);
  --ink-dim:    rgba(26, 26, 28, 0.75);
  --ink-muted:  rgba(26, 26, 28, 0.6);
  
  /* Base backgrounds */
  --bg:         #f0f2f5;
  --bg-overlay: rgba(240, 242, 245, 0.95);
  
  /* Panel colors - Lighter frosted glass */
  --panel:      rgba(255, 255, 255, 0.85);
  --panel-2:    rgba(255, 255, 255, 0.92);
  --panel-3:    rgba(255, 255, 255, 0.75);
  --panel-hover: rgba(255, 255, 255, 0.95);
  
  /* Solid panels */
  --panel-solid:   #ffffff;
  --panel-solid-2: #fafafa;
  --panel-solid-3: #f5f5f7;
  
  /* Strokes/borders */
  --stroke:     rgba(0, 0, 0, 0.1);
  --stroke-2:   rgba(0, 0, 0, 0.06);
  --stroke-subtle: rgba(0, 0, 0, 0.04);
  --stroke-strong: rgba(0, 0, 0, 0.15);
  
  /* Accent colors - iOS light mode adjustments */
  --blue:       #007AFF;
  --blue-light: rgba(0, 122, 255, 0.15);
  --blue-glow:  rgba(0, 122, 255, 0.25);
  
  --green:      #34C759;
  --green-light: rgba(52, 199, 89, 0.15);
  
  --red:        #FF3B30;
  --red-light:  rgba(255, 59, 48, 0.15);
  
  --orange:     #FF9500;
  --orange-light: rgba(255, 149, 0, 0.15);
  
  --yellow:     #FFCC00;
  --yellow-light: rgba(255, 204, 0, 0.15);
  
  --purple:     #AF52DE;
  --purple-light: rgba(175, 82, 222, 0.15);
  
  /* Frosted glass - lighter in light mode */
  --glass-subtle:  rgba(255, 255, 255, 0.5);
  --glass-light:   rgba(255, 255, 255, 0.7);
  --glass-medium:  rgba(255, 255, 255, 0.85);
  --glass-strong:  rgba(255, 255, 255, 0.92);
  --glass-intense: rgba(255, 255, 255, 0.98);
  
  /* Inset highlights */
  --inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --inset-shadow:    inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  
  /* Shadows - lighter in light mode */
  --shadow:        0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md:     0 8px 24px rgba(0, 0, 0, 0.15);
  --shadow-lg:     0 12px 32px rgba(0, 0, 0, 0.18);
  --shadow-xl:     0 20px 48px rgba(0, 0, 0, 0.25);
  
  /* Colored shadows - lighter */
  --shadow-blue:   0 4px 16px rgba(0, 122, 255, 0.25);
  --shadow-green:  0 4px 16px rgba(52, 199, 89, 0.25);
  --shadow-red:    0 4px 16px rgba(255, 59, 48, 0.25);
  
  /* Card shadows with glass */
  --shadow-glass:  0 8px 24px rgba(0, 0, 0, 0.12),
                   inset 0 1px 0 rgba(255, 255, 255, 0.5);
  
  /* Elevation system */
  --elev-1: rgba(255, 255, 255, 0.85);
  --elev-2: rgba(255, 255, 255, 0.92);
  --elev-3: rgba(255, 255, 255, 0.98);
}

/* ============================================================
   LIGHT MODE - Prefers Color Scheme (Auto)
   ============================================================ */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    /* Apply same light mode variables */
    --ink:        rgba(26, 26, 28, 0.95);
    --ink-dim:    rgba(26, 26, 28, 0.75);
    --ink-muted:  rgba(26, 26, 28, 0.6);
    --bg:         #f0f2f5;
    --bg-overlay: rgba(240, 242, 245, 0.95);
    
    --panel:      rgba(255, 255, 255, 0.85);
    --panel-2:    rgba(255, 255, 255, 0.92);
    --panel-3:    rgba(255, 255, 255, 0.75);
    --panel-hover: rgba(255, 255, 255, 0.95);
    
    --panel-solid:   #ffffff;
    --panel-solid-2: #fafafa;
    --panel-solid-3: #f5f5f7;
    
    --stroke:     rgba(0, 0, 0, 0.1);
    --stroke-2:   rgba(0, 0, 0, 0.06);
    --stroke-subtle: rgba(0, 0, 0, 0.04);
    --stroke-strong: rgba(0, 0, 0, 0.15);
    
    --blue:       #007AFF;
    --shadow:     0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-glass: 0 8px 24px rgba(0, 0, 0, 0.12),
                    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}

/* ============================================================
   UTILITY CLASSES - Quick access to design tokens
   ============================================================ */

/* Frosted glass utilities */
.glass-subtle  { background: var(--glass-subtle);  backdrop-filter: var(--blur-light);  -webkit-backdrop-filter: var(--blur-light);  }
.glass-light   { background: var(--glass-light);   backdrop-filter: var(--blur-light);  -webkit-backdrop-filter: var(--blur-light);  }
.glass-medium  { background: var(--glass-medium);  backdrop-filter: var(--blur-medium); -webkit-backdrop-filter: var(--blur-medium); }
.glass-strong  { background: var(--glass-strong);  backdrop-filter: var(--blur-medium); -webkit-backdrop-filter: var(--blur-medium); }
.glass-intense { background: var(--glass-intense); backdrop-filter: var(--blur-heavy);  -webkit-backdrop-filter: var(--blur-heavy);  }

/* Border utilities */
.border-glass   { border: 1px solid var(--stroke); }
.border-glass-2 { border: 1px solid var(--stroke-2); }
.border-strong  { border: 1px solid var(--stroke-strong); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow    { box-shadow: var(--shadow); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }
.shadow-glass { box-shadow: var(--shadow-glass); }

/* Radius utilities */
.radius-sm   { border-radius: var(--radius-sm); }
.radius      { border-radius: var(--radius); }
.radius-lg   { border-radius: var(--radius-lg); }
.radius-xl   { border-radius: var(--radius-xl); }
.radius-pill { border-radius: var(--radius-pill); }