:root {
      --background: #FFFFFF;
      --surface: #F7F8FA;
      --card: #FFFFFF;
      --text-primary: #0F0F0F;
      --text-subtle: #6B7280;
      --accent: #5B5CFF;
      --accent-hover: #6F70FF;
      --border: #E5E7EB;
      --shadow: rgba(0, 0, 0, 0.05);
      --shadow-soft: 0 2px 6px var(--shadow);
      --shadow-md: 0 6px 18px var(--shadow);
      --shadow-hard: 0 12px 32px var(--shadow);
      --radius-sm: 8px;
      --radius-md: 12px;
      --radius-lg: 16px;
      --radius-xl: 20px;
      --space-1: 0.25rem;
      --space-2: 0.5rem;
      --space-3: 0.75rem;
      --space-4: 1rem;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--background);
      color: var(--text-primary);
    }

    .theme-linear:not(.dark) {
      --background: #F6F8FF;
      --surface: #EEF2FF;
      --card: #FFFFFF;
      --text-primary: #0F0F0F;
      --text-subtle: #6B7280;
      --accent: #5B5CFF;
      --accent-hover: #6F70FF;
      --border: #D9DDFB;
      --shadow: rgba(0, 0, 0, 0.05);
    }

    .theme-linear.dark {
      --background: #0E1425;
      --surface: #141A32;
      --card: #1B2240;
      --text-primary: #F5F6F7;
      --text-subtle: #9CA3AF;
      --accent: #6366FF;
      --accent-hover: #7C80FF;
      --border: #262B46;
      --shadow: rgba(0, 0, 0, 0.4);
    }

    .theme-notion:not(.dark) {
      --background: #F7F6F2;
      --surface: #FFFFFF;
      --card: #FBFAF7;
      --text-primary: #111111;
      --text-subtle: #6B6B6B;
      --accent: #2F70E1;
      --accent-hover: #3B82F6;
      --border: #E8E6E0;
      --shadow: rgba(0, 0, 0, 0.04);
    }

    .theme-notion.dark {
      --background: #121212;
      --surface: #1A1A1A;
      --card: #232323;
      --text-primary: #FAFAFA;
      --text-subtle: #A1A1A1;
      --accent: #3B82F6;
      --accent-hover: #60A5FA;
      --border: #2C2C2C;
      --shadow: rgba(0, 0, 0, 0.5);
    }

    .theme-stripe:not(.dark) {
      --background: #F8FAFF;
      --surface: #F1F5FF;
      --card: #FFFFFF;
      --text-primary: #111827;
      --text-subtle: #6B7280;
      --accent: #5558E0;
      --accent-hover: #7A72FF;
      --border: #D6DBFF;
      --shadow: rgba(0, 0, 0, 0.06);
    }

    .theme-stripe.dark {
      --background: #0D0F22;
      --surface: #121433;
      --card: #1A1E45;
      --text-primary: #EEF2FF;
      --text-subtle: #A5A5D3;
      --accent: #8B82FF;
      --accent-hover: #A299FF;
      --border: #2A2E5C;
      --shadow: rgba(0, 0, 0, 0.5);
    }

    .theme-apple:not(.dark) {
      --background: #F5F5F7;
      --surface: #FFFFFF;
      --card: #FAFAFC;
      --text-primary: #1C1C1E;
      --text-subtle: #6E6E73;
      --accent: #007AFF;
      --accent-hover: #0A84FF;
      --border: rgba(0, 0, 0, 0.12);
      --shadow: rgba(0, 0, 0, 0.08);
    }

    .theme-apple.dark {
      --background: #000000;
      --surface: rgba(29, 29, 31, 0.7);
      --card: rgba(44, 44, 46, 0.7);
      --text-primary: #FFFFFF;
      --text-subtle: #98989D;
      --accent: #0A84FF;
      --accent-hover: #4AA3FF;
      --border: rgba(255, 255, 255, 0.1);
      --shadow: rgba(0, 0, 0, 0.6);
    }

    .theme-superhuman:not(.dark) {
      --background: #FFF9F7;
      --surface: #FFFFFF;
      --card: #FFF7F5;
      --text-primary: #1A1A1A;
      --text-subtle: #717171;
      --accent: #FF4D4D;
      --accent-hover: #FF6666;
      --border: #F1E1E1;
      --shadow: rgba(0, 0, 0, 0.05);
    }

    .theme-superhuman.dark {
      --background: #0E0E11;
      --surface: #16161A;
      --card: #1E1E23;
      --text-primary: #F9FAFB;
      --text-subtle: #9CA3AF;
      --accent: #FF6363;
      --accent-hover: #FF7D7D;
      --border: #2A2A32;
      --shadow: rgba(0, 0, 0, 0.5);
    }

    .theme-pro:not(.dark) {
      --background: #F6F8FF;
      --surface: #EEF2FF;
      --card: #FFFFFF;
      --text-primary: #111827;
      --text-subtle: #6B7280;
      --accent: #5558E0;
      --accent-hover: #7A72FF;
      --border: #D9DDFB;
      --shadow: rgba(0, 0, 0, 0.06);
    }

    .theme-pro.dark {
      --background: #0E1425;
      --surface: #141A32;
      --card: #1B2240;
      --text-primary: #EEF2FF;
      --text-subtle: #A5A5D3;
      --accent: #8B82FF;
      --accent-hover: #A299FF;
      --border: #262B46;
      --shadow: rgba(0, 0, 0, 0.5);
    }

    .theme-easy:not(.dark) {
      --background: #F7F6F4;
      --surface: #FFFFFF;
      --card: #FBFAF7;
      --text-primary: #1C1C1E;
      --text-subtle: #6E6E73;
      --accent: #0A84FF;
      --accent-hover: #3B82F6;
      --border: #E6E2D9;
      --shadow: rgba(0, 0, 0, 0.08);
    }

    .theme-easy.dark {
      --background: #000000;
      --surface: rgba(29, 29, 31, 0.7);
      --card: rgba(44, 44, 46, 0.7);
      --text-primary: #FFFFFF;
      --text-subtle: #98989D;
      --accent: #0A84FF;
      --accent-hover: #4AA3FF;
      --border: rgba(255, 255, 255, 0.1);
      --shadow: rgba(0, 0, 0, 0.6);
    }

    .theme-neon:not(.dark) {
      --background: #F7FFFE;
      --surface: #EEFFFA;
      --card: #FFFFFF;
      --text-primary: #0F0F0F;
      --text-subtle: #6B7280;
      --accent: #00FFC8;
      --accent-hover: #38FFD8;
      --border: #D6F5EC;
      --shadow: rgba(0, 0, 0, 0.05);
      --accent-soft: rgba(0, 255, 200, 0.12);
    }

    .theme-neon.dark {
      --background: #0A0F12;
      --surface: #0F1620;
      --card: #141E29;
      --text-primary: #EFFFFA;
      --text-subtle: #9CA3AF;
      --accent: #00FFC8;
      --accent-hover: #4DFFE1;
      --border: #1E2A33;
      --shadow: rgba(0, 0, 0, 0.6);
      --accent-soft: rgba(0, 255, 200, 0.18);
    }

    .theme-vaporwave:not(.dark) {
      --background: #F9F5FF;
      --surface: #FFF0FB;
      --card: #FFFFFF;
      --text-primary: #0F0F0F;
      --text-subtle: #6B7280;
      --accent: #FF72E1;
      --accent-hover: #FFA6F6;
      --border: #EED8F9;
      --shadow: rgba(0, 0, 0, 0.05);
      --accent-soft: rgba(255, 114, 225, 0.12);
    }

    .theme-vaporwave.dark {
      --background: #140B1A;
      --surface: #1C1024;
      --card: #251433;
      --text-primary: #FAF5FF;
      --text-subtle: #A1A1A1;
      --accent: #FF72E1;
      --accent-hover: #FFA6F6;
      --border: #33204A;
      --shadow: rgba(0, 0, 0, 0.6);
      --accent-soft: rgba(255, 114, 225, 0.18);
    }

    .theme-y2k:not(.dark) {
      --background: #F4F8FF;
      --surface: #EEF1FF;
      --card: #FFFFFF;
      --text-primary: #0F0F0F;
      --text-subtle: #6B7280;
      --accent: #7C3AED;
      --accent-hover: #A78BFA;
      --border: #DCE4FF;
      --shadow: rgba(0, 0, 0, 0.05);
      --accent-soft: rgba(124, 58, 237, 0.12);
    }

    .theme-y2k.dark {
      --background: #0D1020;
      --surface: #14173A;
      --card: #1C214F;
      --text-primary: #EEF2FF;
      --text-subtle: #A5A5D3;
      --accent: #8B5CF6;
      --accent-hover: #A78BFA;
      --border: #2A3070;
      --shadow: rgba(0, 0, 0, 0.6);
      --accent-soft: rgba(124, 58, 237, 0.18);
    }

    .theme-sunset:not(.dark) {
      --background: #FFF7F2;
      --surface: #FFEFE3;
      --card: #FFFFFF;
      --text-primary: #1C1C1E;
      --text-subtle: #6E6E73;
      --accent: #FF6D28;
      --accent-hover: #FF8C4A;
      --border: #FFE0CE;
      --shadow: rgba(0, 0, 0, 0.06);
      --accent-soft: rgba(255, 109, 40, 0.12);
    }

    .theme-sunset.dark {
      --background: #1A0E0B;
      --surface: #24130F;
      --card: #2C1813;
      --text-primary: #FFF2EA;
      --text-subtle: #A1A1A1;
      --accent: #FF8C4A;
      --accent-hover: #FFB07A;
      --border: #3A231B;
      --shadow: rgba(0, 0, 0, 0.6);
      --accent-soft: rgba(255, 109, 40, 0.18);
    }

    .theme-aurora:not(.dark) {
      --background: #F0FBFF;
      --surface: #E6FAF6;
      --card: #FFFFFF;
      --text-primary: #0F0F0F;
      --text-subtle: #6B7280;
      --accent: #06B6D4;
      --accent-hover: #22D3EE;
      --border: #CDEEF5;
      --shadow: rgba(0, 0, 0, 0.05);
      --accent-soft: rgba(34, 211, 238, 0.12);
    }

    .theme-aurora.dark {
      --background: #0C1220;
      --surface: #122337;
      --card: #182C44;
      --text-primary: #E6FAFF;
      --text-subtle: #A1A1A1;
      --accent: #22D3EE;
      --accent-hover: #34D399;
      --border: #24384F;
      --shadow: rgba(0, 0, 0, 0.6);
      --accent-soft: rgba(34, 211, 238, 0.18);
    }

    /* Premium Scrollbar */
    .custom-scrollbar::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }

    .custom-scrollbar::-webkit-scrollbar-track {
      background: transparent;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 10px;
    }

    .custom-scrollbar::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    /* Dot Pattern Utility */
    .bg-dots {
      background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
      background-size: 24px 24px;
    }

    /* Hide standard scrollbars but keep functionality */
    .no-scrollbar::-webkit-scrollbar {
      display: none;
    }

    .no-scrollbar {
      -ms-overflow-style: none;
      scrollbar-width: none;
    }

    .contrast-high:not(.dark) {
      --border: #A1A1AA;
      --text-subtle: #3F3F46;
      --shadow: rgba(0, 0, 0, 0.15);
    }

    .contrast-high.dark {
      --border: rgba(255, 255, 255, 0.25);
      --text-subtle: #E5E7EB;
      --shadow: rgba(0, 0, 0, 0.85);
    }

    /* Resume Shadow */
    .resume-shadow {
      box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.03),
        0 20px 40px -10px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 0, 0, 0.1);
    }