:root {
      --bg-primary: #060815;
      --bg-secondary: #0b1020;
      --text-primary: #ffffff;
      --text-secondary: rgba(255, 255, 255, 0.75);
      --text-muted: rgba(255, 255, 255, 0.6);
      --glass-bg: rgba(255, 255, 255, 0.06);
      --glass-border: rgba(255, 255, 255, 0.12);
      --ring-color: rgba(255, 255, 255, 0.10);
    }

    [data-theme="light"] {
      --bg-primary: #ffffff;
      --bg-secondary: #f8fafc;
      --text-primary: #0f172a;
      --text-secondary: #475569;
      --text-muted: #64748b;
      --glass-bg: rgba(0, 0, 0, 0.02);
      --glass-border: rgba(0, 0, 0, 0.08);
      --ring-color: rgba(0, 0, 0, 0.06);
    }

    /* Subtle animated gradient background */
    .bg-aurora {
      background: radial-gradient(1200px 700px at 50% 50%, rgba(34,197,94,.15), transparent 70%),
                  linear-gradient(180deg, #070a14 0%, #0b1020 40%, #060815 100%);
    }

    [data-theme="light"] .bg-aurora {
      background: radial-gradient(1200px 700px at 50% 50%, rgba(34,197,94,.08), transparent 70%),
                  linear-gradient(180deg, #ffffff 0%, #f8fafc 40%, #f1f5f9 100%);
    }
    .noise:before{
      content:"";
      position:absolute;
      inset:0;
      background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
      mix-blend-mode:overlay;
      opacity:.25;
      pointer-events:none;
    }
    .glass {
      background: var(--glass-bg);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border: 1px solid var(--glass-border);
    }
    .ring-soft {
      box-shadow: 0 0 0 1px var(--ring-color) inset;
    }

    [data-theme="light"] .noise:before {
      opacity: .08;
    }

    /* Text color overrides for light mode */
    body {
      color: var(--text-primary);
    }

    [data-theme="light"] .text-white {
      color: var(--text-primary) !important;
    }

    [data-theme="light"] .text-white\/90 {
      color: #1e293b !important;
    }

    [data-theme="light"] .text-white\/80 {
      color: var(--text-secondary) !important;
    }

    [data-theme="light"] .text-white\/75 {
      color: var(--text-secondary) !important;
    }

    [data-theme="light"] .text-white\/70 {
      color: #64748b !important;
    }

    [data-theme="light"] .text-white\/65 {
      color: #64748b !important;
    }

    [data-theme="light"] .text-white\/60 {
      color: var(--text-muted) !important;
    }

    [data-theme="light"] .bg-white\/5 {
      background-color: rgba(0, 0, 0, 0.03) !important;
    }

    [data-theme="light"] .bg-white\/10 {
      background-color: rgba(0, 0, 0, 0.05) !important;
    }

    [data-theme="light"] .bg-white\/20 {
      background-color: rgba(0, 0, 0, 0.1) !important;
    }

    /* Toggle switch knob in light mode */
    [data-theme="light"] #billingKnob {
      background-color: rgba(34, 197, 94, 1) !important;
    }

    [data-theme="light"] .ring-white\/10 {
      --tw-ring-color: rgba(0, 0, 0, 0.08) !important;
    }

    [data-theme="light"] .ring-white\/15 {
      --tw-ring-color: rgba(0, 0, 0, 0.1) !important;
    }

    /* Remove shadows */
    .shadow-soft,
    .shadow-floaty,
    .shadow-glow {
      box-shadow: none !important;
    }

    /* SVG strokes for light mode */
    [data-theme="light"] svg path,
    [data-theme="light"] svg line,
    [data-theme="light"] svg circle {
      stroke: currentColor;
    }

    /* Hover states for light mode */
    [data-theme="light"] a:hover .text-white {
      color: var(--text-primary) !important;
    }

    [data-theme="light"] .hover\:text-white:hover {
      color: var(--text-primary) !important;
    }

    [data-theme="light"] .bg-\[#050815\]\/60,
    [data-theme="light"] .bg-\[#050815\]\/70 {
      background-color: #f1f5f9 !important;
    }

    /* Dark box backgrounds in light mode */
    [data-theme="light"] [class*="bg-[#"] {
      background-color: #f1f5f9 !important;
    }

    /* Text inside dark boxes needs to be darker in light mode */
    [data-theme="light"] .bg-\[#050815\]\/60 .text-white\/50,
    [data-theme="light"] .bg-\[#050815\]\/60 .text-white\/60,
    [data-theme="light"] .bg-\[#050815\]\/70 .text-white\/50,
    [data-theme="light"] .bg-\[#050815\]\/70 .text-white\/60 {
      color: #64748b !important;
    }

    [data-theme="light"] .bg-\[#050815\]\/60 .text-emerald-300,
    [data-theme="light"] .bg-\[#050815\]\/70 .text-emerald-300,
    [data-theme="light"] .bg-\[#050815\]\/60 .text-emerald-400,
    [data-theme="light"] .bg-\[#050815\]\/70 .text-emerald-400 {
      color: #10b981 !important;
    }

    /* Selection colors for light mode */
    [data-theme="light"] ::selection {
      background-color: #d1fae5;
      color: #0f172a;
    }

    .theme-toggle {
      cursor: pointer;
      transition: transform 0.2s ease;
    }
    .theme-toggle:hover {
      transform: scale(1.05);
    }
    .theme-toggle:active {
      transform: scale(0.95);
    }

    /* Theme-specific logo visibility */
    .logo-dark { display: inline; }
    .logo-light { display: none; }
    
    [data-theme="light"] .logo-dark { display: none; }
    [data-theme="light"] .logo-light { display: inline; }

    .grid-fade {
      background-image:
        linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size: 46px 46px;
      mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
      -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%);
      opacity: .35;
    }

    /* Privacy Modal Light Mode Fixes */
    [data-theme="light"] #privacy-modal .glass {
      background: rgba(255, 255, 255, 0.98) !important;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 0, 0, 0.12);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }

    [data-theme="light"] #privacy-modal h2,
    [data-theme="light"] #privacy-modal h3 {
      color: #0f172a !important;
    }

    [data-theme="light"] #privacy-modal p,
    [data-theme="light"] #privacy-modal li {
      color: #475569 !important;
    }

    [data-theme="light"] #privacy-modal .text-white\/60 {
      color: #64748b !important;
    }

    /* Terms Modal Light Mode Fixes */
    [data-theme="light"] #terms-modal .glass {
      background: rgba(255, 255, 255, 0.98) !important;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 0, 0, 0.12);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }

    [data-theme="light"] #terms-modal h2,
    [data-theme="light"] #terms-modal h3 {
      color: #0f172a !important;
    }

    [data-theme="light"] #terms-modal p,
    [data-theme="light"] #terms-modal li {
      color: #475569 !important;
    }

    [data-theme="light"] #terms-modal .text-white\/60 {
      color: #64748b !important;
    }

    /* Refund Modal Light Mode Fixes */
    [data-theme="light"] #refund-modal .glass {
      background: rgba(255, 255, 255, 0.98) !important;
      backdrop-filter: blur(20px);
      border: 1px solid rgba(0, 0, 0, 0.12);
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    }

    [data-theme="light"] #refund-modal h2,
    [data-theme="light"] #refund-modal h3 {
      color: #0f172a !important;
    }

    [data-theme="light"] #refund-modal p,
    [data-theme="light"] #refund-modal li {
      color: #475569 !important;
    }

    [data-theme="light"] #refund-modal .text-white\/60 {
      color: #64748b !important;
    }