/**
 * RGB VPN Theme — Figma design tokens
 * Theme-only layer: no content/structure changes.
 */
:root {
    --rgb-grid-size: 48px;
    --rgb-grid-color: rgba(0, 212, 255, 0.1);
    /* Backgrounds */
    --rgb-bg-primary: #0F1421;
    --rgb-bg-secondary: #030E1D;
    --rgb-bg-gradient: linear-gradient(
        180deg,
        #000B89 26.2%,
        rgba(51, 57, 145, 0.4) 73.6%,
        rgba(0, 11, 137, 0) 100%
    );

    /* Surface cards (Figma Style palette) */
    --rgb-surface-1: #04132C;
    --rgb-surface-2: #081831;
    --rgb-surface-3: #011325;
    --rgb-surface-4: #051326;
    --rgb-surface-5: #05132C;

    /* Brand */
    --color-primary: #2563EB;
    --color-primary-dark: #000B89;
    --color-primary-mid: #333991;
    --color-secondary: #00D4FF;
    --color-accent: #22D3EE;

    /* Text */
    --rgb-text-primary: #FFFFFF;
    --rgb-text-secondary: #94A3B8;
    --rgb-text-muted: #64748B;
    --rgb-text-subtle: #475569;

    /* Borders */
    --rgb-border: rgba(255, 255, 255, 0.08);
    --rgb-border-strong: rgba(0, 212, 255, 0.2);

    /* Status */
    --rgb-success: #00D4FF;
    --rgb-danger: #f06548;
}

/* Unified page grid — same size everywhere */
.rgb-page-grid {
    background-image:
        repeating-linear-gradient(90deg, var(--rgb-grid-color) 0, var(--rgb-grid-color) 1px, transparent 1px, transparent var(--rgb-grid-size)),
        repeating-linear-gradient(0deg, var(--rgb-grid-color) 0, var(--rgb-grid-color) 1px, transparent 1px, transparent var(--rgb-grid-size));
}

/* ── Public pages (Tailwind layout) ── */
body.rgb-theme {
    background-color: var(--rgb-bg-primary);
    background-image:
        radial-gradient(ellipse 120% 70% at 50% -10%, rgba(0, 11, 137, 0.45) 0%, transparent 65%),
        var(--rgb-bg-gradient);
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 70vh;
    color: var(--rgb-text-primary);
}

body.rgb-theme .text-slate-900 {
    color: var(--rgb-text-primary) !important;
}

body.rgb-theme .text-slate-800 {
    color: #e2e8f0 !important;
}

body.rgb-theme .text-slate-700 {
    color: #cbd5e1 !important;
}

body.rgb-theme .text-slate-600 {
    color: var(--rgb-text-secondary) !important;
}

body.rgb-theme .text-slate-500 {
    color: var(--rgb-text-muted) !important;
}

body.rgb-theme .text-slate-400 {
    color: var(--rgb-text-subtle) !important;
}

body.rgb-theme .bg-white,
body.rgb-theme .bg-white\/95,
body.rgb-theme .bg-white\/70 {
    background-color: var(--rgb-surface-1) !important;
}

body.rgb-theme .supports-\[backdrop-filter\]\:bg-white\/40 {
    background-color: rgba(4, 19, 44, 0.6) !important;
}

body.rgb-theme .bg-slate-50,
body.rgb-theme .bg-slate-100 {
    background-color: var(--rgb-surface-2) !important;
}

body.rgb-theme .from-slate-50 {
    --tw-gradient-from: var(--rgb-bg-secondary) !important;
}

body.rgb-theme .to-white,
body.rgb-theme .via-white {
    --tw-gradient-to: var(--rgb-surface-1) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--rgb-surface-1), var(--tw-gradient-to) !important;
}

body.rgb-theme .border-slate-200,
body.rgb-theme .border-slate-200\/50 {
    border-color: var(--rgb-border) !important;
}

body.rgb-theme .hover\:text-slate-900:hover {
    color: var(--rgb-text-primary) !important;
}

body.rgb-theme .hover\:text-blue-600:hover,
body.rgb-theme .hover\:text-orange-600:hover {
    color: var(--color-secondary) !important;
}

body.rgb-theme .text-blue-500,
body.rgb-theme .text-blue-600 {
    color: var(--color-secondary) !important;
}

body.rgb-theme .text-orange-500,
body.rgb-theme .text-orange-600 {
    color: var(--color-accent) !important;
}

body.rgb-theme .from-blue-400\/20,
body.rgb-theme .from-blue-400\/30,
body.rgb-theme .from-blue-500\/25,
body.rgb-theme .from-blue-500\/40 {
    --tw-gradient-from: rgba(0, 11, 137, 0.3) !important;
}

body.rgb-theme .from-orange-400\/20,
body.rgb-theme .from-orange-400\/30,
body.rgb-theme .from-orange-500\/20,
body.rgb-theme .from-orange-500\/40 {
    --tw-gradient-from: rgba(0, 212, 255, 0.15) !important;
}

body.rgb-theme .to-blue-600\/10,
body.rgb-theme .to-blue-700\/5,
body.rgb-theme .to-blue-700\/20 {
    --tw-gradient-to: rgba(37, 99, 235, 0.1) !important;
}

body.rgb-theme .to-orange-600\/10,
body.rgb-theme .to-orange-700\/10 {
    --tw-gradient-to: rgba(0, 212, 255, 0.08) !important;
}

body.rgb-theme .bg-\[linear-gradient\(135deg\,rgba\(14\,165\,233\,\.65\)\,rgba\(249\,115\,22\,\.65\)\)\] {
    background: linear-gradient(135deg, rgba(0, 11, 137, 0.8), rgba(0, 212, 255, 0.4)) !important;
}

body.rgb-theme .group-hover\:bg-\[linear-gradient\(135deg\,rgba\(14\,165\,233\,\.9\)\,rgba\(249\,115\,22\,\.9\)\)\]:hover {
    background: linear-gradient(135deg, rgba(0, 11, 137, 0.95), rgba(0, 212, 255, 0.6)) !important;
}

body.rgb-theme .chip {
    background: var(--rgb-surface-2);
    border-color: var(--rgb-border-strong);
    color: var(--rgb-text-secondary);
}

body.rgb-theme section#hero {
    background: transparent !important;
}

body.rgb-theme #plans {
    background: transparent !important;
}

body.rgb-theme .pricingTable {
    background: var(--rgb-surface-1);
    box-shadow: 0 0 10px rgba(0, 11, 137, 0.3);
    color: var(--rgb-text-muted);
}

body.rgb-theme .pricingTable .pricingTable-header {
    background: var(--color-primary-dark);
}

body.rgb-theme .pricingTable:hover .pricingTable-header {
    background: var(--color-secondary);
}

body.rgb-theme .pricingTable .heading {
    color: var(--color-secondary);
}

body.rgb-theme .pricingTable .pricingTable-signup a {
    background: var(--color-primary);
}

body.rgb-theme .pricingTable .pricingTable-signup a:hover {
    background: var(--color-secondary);
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.4);
}

body.rgb-theme .pricingTable.green .heading,
body.rgb-theme .pricingTable.green .price-value {
    color: var(--color-secondary) !important;
}

body.rgb-theme .pricingTable.green .pricingTable-signup a,
body.rgb-theme .pricingTable.green:hover .pricingTable-header {
    background: var(--color-primary) !important;
}

/* Tailwind blue/orange utility remapping */
body.rgb-theme .bg-blue-500,
body.rgb-theme .bg-blue-500\/20,
body.rgb-theme .bg-blue-500\/25,
body.rgb-theme .bg-blue-500\/40,
body.rgb-theme .bg-blue-500\/60 {
    background-color: rgba(0, 11, 137, 0.6) !important;
}

body.rgb-theme .bg-orange-500,
body.rgb-theme .bg-orange-500\/20,
body.rgb-theme .from-orange-500,
body.rgb-theme .to-orange-500,
body.rgb-theme .to-orange-600,
body.rgb-theme .hover\:from-orange-600:hover,
body.rgb-theme .hover\:to-orange-700:hover {
    --tw-gradient-from: #00D4FF !important;
    --tw-gradient-to: #22D3EE !important;
}

body.rgb-theme .from-blue-600,
body.rgb-theme .via-blue-700,
body.rgb-theme .to-blue-700 {
    --tw-gradient-from: #000B89 !important;
    --tw-gradient-via: #2563EB !important;
    --tw-gradient-to: #00D4FF !important;
}

body.rgb-theme .from-blue-500,
body.rgb-theme .to-blue-600,
body.rgb-theme .from-blue-500\/40,
body.rgb-theme .to-blue-700\/20 {
    --tw-gradient-from: #000B89 !important;
    --tw-gradient-to: #2563EB !important;
}

body.rgb-theme .bg-gradient-to-r.from-blue-600.to-orange-500,
body.rgb-theme .bg-gradient-to-r.from-orange-500.to-orange-600 {
    background-image: linear-gradient(to right, #00D4FF, #2563EB) !important;
}

body.rgb-theme .bg-gradient-to-br.from-blue-600.via-blue-700.to-orange-500 {
    background-image: linear-gradient(to bottom right, #000B89, #2563EB, #00D4FF) !important;
}

body.rgb-theme .text-blue-500,
body.rgb-theme .text-blue-600 {
    color: var(--color-secondary) !important;
}

body.rgb-theme .focus\:ring-blue-500:focus {
    --tw-ring-color: rgba(0, 212, 255, 0.5) !important;
}

body.rgb-theme .border-slate-300 {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

body.rgb-theme .hover\:shadow-blue-500\/25:hover {
    --tw-shadow-color: rgba(0, 212, 255, 0.25) !important;
}

body.rgb-theme .bg-purple-600,
body.rgb-theme .bg-purple-700,
body.rgb-theme .from-purple-600,
body.rgb-theme .to-purple-700 {
    background-color: #000B89 !important;
    --tw-gradient-from: #000B89 !important;
    --tw-gradient-to: #2563EB !important;
}

body.rgb-theme .bg-yellow-400 {
    background-color: #00D4FF !important;
    color: #030E1D !important;
}

body.rgb-theme .shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
}

body.rgb-theme .shadow-lg,
body.rgb-theme .shadow-xl {
    box-shadow: 0 10px 25px -5px rgba(0, 11, 137, 0.3) !important;
}

/* Footer social icons — match footer link hover color */
body.rgb-theme footer .footer-social-icon {
    text-decoration: none;
}

body.rgb-theme footer .footer-social-icon:visited,
body.rgb-theme footer .footer-social-icon:active {
    color: #cbd5e1 !important;
    background-color: #081831 !important;
}

body.rgb-theme footer .footer-social-icon:hover {
    color: var(--color-secondary) !important;
    background-color: rgba(0, 212, 255, 0.15) !important;
}

body.rgb-theme footer ul a:visited,
body.rgb-theme footer .text-slate-400 a:visited {
    color: var(--rgb-text-subtle) !important;
}

body.rgb-theme footer ul a:hover,
body.rgb-theme footer .text-slate-400 a:hover {
    color: var(--color-secondary) !important;
}

/* Header auth buttons — ensure brand gradient renders on CDN Tailwind */
body.rgb-theme header .bg-gradient-to-r.from-blue-600.to-orange-500 {
    background-image: linear-gradient(to right, #00D4FF, #2563EB) !important;
    color: #ffffff !important;
}

body.rgb-theme header .bg-gradient-to-br.from-blue-600.to-orange-500 {
    background-image: linear-gradient(to bottom right, #000B89, #00D4FF) !important;
}