/* ===================================================
   THE PWNED ARCHIVE — Apple-Inspired Design System
   =================================================== */

:root {
    /* Typography — SF Pro System Stack */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
                 "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace;

    /* Spacing Scale */
    --space-2:  0.125rem;
    --space-4:  0.25rem;
    --space-6:  0.375rem;
    --space-8:  0.5rem;
    --space-12: 0.75rem;
    --space-16: 1rem;
    --space-20: 1.25rem;
    --space-24: 1.5rem;
    --space-32: 2rem;
    --space-40: 2.5rem;
    --space-48: 3rem;
    --space-64: 4rem;

    /* Legacy spacing aliases */
    --spacing-xs: var(--space-4);
    --spacing-sm: var(--space-8);
    --spacing-md: var(--space-16);
    --spacing-lg: var(--space-24);
    --spacing-xl: var(--space-32);

    /* Border Radius — iOS style */
    --radius-sm:   10px;
    --radius-md:   14px;
    --radius-lg:   18px;
    --radius-xl:   22px;
    --radius-2xl:  28px;
    --radius-pill: 9999px;

    /* Sidebar */
    --sidebar-width: 270px;
    --tab-bar-height: 82px;

    /* iOS Spring Animation Curves */
    --spring-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --spring-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
    --spring-fast:    cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --transition-fast:   150ms var(--spring-fast);
    --transition-smooth: 300ms var(--spring-smooth);
    --transition-spring: 450ms var(--spring-bounce);

    /* Blur Layers */
    --blur-sm:  blur(8px);
    --blur-md:  blur(16px);
    --blur-lg:  blur(24px);
    --blur-xl:  blur(40px);
}

/* =============================================
   DARK THEME (Default) — iOS Dark Mode palette
   ============================================= */
[data-theme="dark"] {
    /* Backgrounds */
    --bg-main:         #000000;
    --bg-secondary:    #0c0c0e;
    --bg-tertiary:     #111113;
    --bg-elevated:     #1c1c1e;
    --bg-card:         rgba(28, 28, 30, 0.72);
    --bg-card-hover:   rgba(38, 38, 42, 0.90);
    --bg-card-solid:   #1c1c1e;
    --bg-pill:         rgba(255, 255, 255, 0.08);
    --bg-pill-hover:   rgba(255, 255, 255, 0.14);
    --bg-input:        rgba(255, 255, 255, 0.07);

    /* Borders */
    --border-color:    rgba(255, 255, 255, 0.10);
    --border-strong:   rgba(255, 255, 255, 0.18);
    --divider:         rgba(255, 255, 255, 0.06);

    /* Text */
    --text-primary:    #ffffff;
    --text-secondary:  rgba(255, 255, 255, 0.55);
    --text-tertiary:   rgba(255, 255, 255, 0.30);
    --text-placeholder:rgba(255, 255, 255, 0.25);

    /* Accent / iOS System Green (like "Mint" accent) */
    --accent-color:    #00ff9d;
    --accent-dim:      rgba(0, 255, 157, 0.15);
    --accent-glow:     0 0 20px rgba(0, 255, 157, 0.25);

    /* iOS System Colors */
    --sys-blue:        #0a84ff;
    --sys-green:       #30d158;
    --sys-orange:      #ff9f0a;
    --sys-red:         #ff453a;
    --sys-yellow:      #ffd60a;
    --sys-purple:      #bf5af2;
    --sys-teal:        #64d2ff;
    --sys-indigo:      #5e5ce6;

    /* Platform Colors */
    --color-htb:       #9fef00;
    --color-thm:       #c11111;
    --color-pico:      #0a84ff;
    --color-vulnhub:   #ff9f0a;
    --color-custom:    #bf5af2;

    /* Difficulty Colors */
    --color-easy:      #30d158;
    --color-medium:    #ffd60a;
    --color-hard:      #ff453a;
    --color-insane:    #bf5af2;

    /* Glassmorphism */
    --glass-blur:      var(--blur-xl);
    --glass-bg:        rgba(20, 20, 22, 0.70);
    --glass-border:    rgba(255, 255, 255, 0.08);
    --glass-highlight: rgba(255, 255, 255, 0.05);

    /* Shadows */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.40);
    --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.50);
    --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.60);
    --shadow-soft:  var(--shadow-md);

    /* Tag */
    --tag-bg:    rgba(255, 255, 255, 0.08);
    --tag-text:  rgba(255, 255, 255, 0.70);

    /* Sidebar */
    --sidebar-bg: rgba(10, 10, 12, 0.85);
    --tab-bar-bg: rgba(18, 18, 20, 0.85);
}

/* =============================================
   LIGHT THEME — iOS Light Mode palette
   ============================================= */
[data-theme="light"] {
    /* Backgrounds */
    --bg-main:         #f2f2f7;
    --bg-secondary:    #e5e5ea;
    --bg-tertiary:     #d1d1d6;
    --bg-elevated:     #ffffff;
    --bg-card:         rgba(255, 255, 255, 0.75);
    --bg-card-hover:   rgba(255, 255, 255, 0.95);
    --bg-card-solid:   #ffffff;
    --bg-pill:         rgba(0, 0, 0, 0.06);
    --bg-pill-hover:   rgba(0, 0, 0, 0.10);
    --bg-input:        rgba(0, 0, 0, 0.05);

    /* Borders */
    --border-color:    rgba(0, 0, 0, 0.08);
    --border-strong:   rgba(0, 0, 0, 0.15);
    --divider:         rgba(0, 0, 0, 0.06);

    /* Text */
    --text-primary:    #000000;
    --text-secondary:  rgba(0, 0, 0, 0.50);
    --text-tertiary:   rgba(0, 0, 0, 0.30);
    --text-placeholder:rgba(0, 0, 0, 0.25);

    /* Accent */
    --accent-color:    #1d9e75;
    --accent-dim:      rgba(29, 158, 117, 0.12);
    --accent-glow:     0 0 20px rgba(29, 158, 117, 0.20);

    /* iOS System Colors */
    --sys-blue:        #007aff;
    --sys-green:       #34c759;
    --sys-orange:      #ff9500;
    --sys-red:         #ff3b30;
    --sys-yellow:      #ffcc00;
    --sys-purple:      #af52de;
    --sys-teal:        #32ade6;
    --sys-indigo:      #5856d6;

    /* Platform Colors */
    --color-htb:       #6abf00;
    --color-thm:       #c11111;
    --color-pico:      #007aff;
    --color-vulnhub:   #ff9500;
    --color-custom:    #af52de;

    /* Difficulty Colors */
    --color-easy:      #34c759;
    --color-medium:    #ff9500;
    --color-hard:      #ff3b30;
    --color-insane:    #af52de;

    /* Glassmorphism */
    --glass-blur:      var(--blur-lg);
    --glass-bg:        rgba(255, 255, 255, 0.65);
    --glass-border:    rgba(0, 0, 0, 0.07);
    --glass-highlight: rgba(255, 255, 255, 0.80);

    /* Shadows */
    --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md:    0 4px 20px rgba(0, 0, 0, 0.09);
    --shadow-lg:    0 8px 40px rgba(0, 0, 0, 0.12);
    --shadow-soft:  var(--shadow-md);

    /* Tag */
    --tag-bg:    rgba(0, 0, 0, 0.06);
    --tag-text:  rgba(0, 0, 0, 0.65);

    /* Sidebar */
    --sidebar-bg: rgba(242, 242, 247, 0.85);
    --tab-bar-bg: rgba(250, 250, 252, 0.88);
}