/* =========================================================
   Scrumlin Website — dual theme tokens
   dark   = current neon (default)
   portal = login / admin navy–cyan palette
   ========================================================= */

html,
html[data-theme="dark"] {
    color-scheme: dark;

    --sc-bg: #050515;
    --sc-bg-rgb: 5, 5, 21;
    --sc-ink: #050816;
    --sc-navy: #0b1229;

    --sc-surface-rgb: 8, 12, 32;
    --sc-chrome-rgb: 13, 15, 30;
    --sc-shadow-rgb: 2, 6, 23;
    --sc-border-rgb: 165, 180, 252;

    --sc-cyan: #22d3ee;
    --sc-cyan-rgb: 34, 211, 238;
    --sc-cyan-soft: #a5f3fc;
    --sc-accent: #67e8f9;
    --sc-accent-rgb: 103, 232, 249;

    --sc-blue: #6366f1;
    --sc-blue-rgb: 99, 102, 241;
    --sc-indigo: #818cf8;
    --sc-indigo-rgb: 129, 140, 248;
    --sc-violet: #a78bfa;
    --sc-violet-rgb: 167, 139, 250;
    --sc-violet-soft: #c4b5fd;
    --sc-purple: #a855f7;
    --sc-purple-rgb: 168, 85, 247;
    --sc-purple-deep: #7c3aed;
    --sc-purple-deep-rgb: 124, 58, 237;

    --sc-green: #34d399;
    --sc-lime: #84cc16;
    --sc-gold: #fbbf24;

    --sc-text: #e2e8f0;
    --sc-text-bright: #f8fafc;
    --sc-text-soft: #cbd5e1;
    --sc-muted: #94a3b8;
    --sc-muted-dim: #64748b;

    --sc-gradient-primary: linear-gradient(115deg, var(--sc-blue), var(--sc-purple) 55%, var(--sc-cyan));
    --sc-gradient-cta: linear-gradient(120deg, var(--sc-cyan), var(--sc-blue) 58%, var(--sc-green));
    /* Neon dark headings — violet → indigo → cyan (not teal portal style) */
    --sc-gradient-text: linear-gradient(90deg, var(--sc-purple) 0%, var(--sc-blue) 42%, var(--sc-cyan) 100%);
    --sc-gradient-bar: linear-gradient(90deg, #1d976c, var(--sc-cyan), var(--sc-blue), #ff4b2b, #fdc830);

    --sc-btn-edge: #312e81;
    --sc-btn-edge-rgb: 49, 46, 129;
    --sc-btn-ghost-edge: #0b1024;

    --sc-display: "Space Grotesk", "Inter", sans-serif;
    --sc-body: "Inter", system-ui, sans-serif;
}

html[data-theme="portal"] {
    color-scheme: dark;

    /* Login / admin navy family */
    --sc-bg: #0a1c33;
    --sc-bg-rgb: 10, 28, 51;
    --sc-ink: #0a1c33;
    --sc-navy: #0e2744;

    --sc-surface-rgb: 14, 39, 68;
    --sc-chrome-rgb: 14, 39, 68;
    --sc-shadow-rgb: 10, 28, 51;
    --sc-border-rgb: 0, 210, 255;

    --sc-cyan: #00d2ff;
    --sc-cyan-rgb: 0, 210, 255;
    --sc-cyan-soft: #7aeaff;
    --sc-accent: #00d2ff;
    --sc-accent-rgb: 0, 210, 255;

    /* Keep accents in the navy/cyan family — no orange/gold in heading gradients */
    --sc-blue: #3a7bd5;
    --sc-blue-rgb: 58, 123, 213;
    --sc-indigo: #2b8fd4;
    --sc-indigo-rgb: 43, 143, 212;
    --sc-violet: #5ec8ff;
    --sc-violet-rgb: 94, 200, 255;
    --sc-violet-soft: #9adfff;
    --sc-purple: #3a7bd5;
    --sc-purple-rgb: 58, 123, 213;
    --sc-purple-deep: #004e92;
    --sc-purple-deep-rgb: 0, 78, 146;

    --sc-green: #1d976c;
    --sc-lime: #93f9b9;
    --sc-gold: #fdc830;
    --sc-teal: #2dd4bf;

    --sc-text: #e6f2ff;
    --sc-text-bright: #ffffff;
    --sc-text-soft: #c5d8ee;
    --sc-muted: #8ba3bc;
    --sc-muted-dim: #6b7c93;

    --sc-gradient-primary: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 55%, #004e92 100%);
    --sc-gradient-cta: linear-gradient(135deg, #00d2ff 0%, #3a7bd5 55%, #004e92 100%);
    /*
      Portal / “light” headings — subtle logo palette
      blue ribbon → cyan → soft lime → soft amber (warm tip only)
    */
    --sc-gradient-text: linear-gradient(
        100deg,
        #1e60b4 0%,
        #3abef9 32%,
        #6fcf6a 68%,
        #f0b35a 100%
    );
    --sc-gradient-bar: linear-gradient(90deg, #1d976c, #00d2ff, #3a7bd5, #ff4b2b, #fdc830);

    --sc-btn-edge: #06325e;
    --sc-btn-edge-rgb: 6, 50, 94;
    --sc-btn-ghost-edge: #07182c;
}

/* Base surfaces follow active theme */
html {
    background: var(--sc-bg);
}

body.website-page {
    background: var(--sc-bg);
    color: var(--sc-text);
}

.main {
    background: var(--sc-bg);
}

/* Portal theme — login-aligned atmosphere */
html[data-theme="portal"] body.website-page {
    background:
        radial-gradient(ellipse 55% 42% at 12% 18%, rgba(0, 210, 255, 0.14), transparent 58%),
        radial-gradient(ellipse 45% 36% at 88% 8%, rgba(255, 65, 108, 0.1), transparent 52%),
        radial-gradient(ellipse 40% 30% at 70% 80%, rgba(29, 151, 108, 0.1), transparent 55%),
        linear-gradient(145deg, #0a1c33 0%, #0e2744 48%, #123a63 100%);
    background-attachment: fixed;
}

html[data-theme="portal"] .main,
html[data-theme="portal"] .site-footer,
html[data-theme="portal"] .about,
html[data-theme="portal"] .allies,
html[data-theme="portal"] .testimonials {
    background: transparent;
}

/* Horizon stays solid — no page ribbons through sticky chapters */
html[data-theme="portal"] .horizon,
html[data-theme="portal"] .after-hero .horizon {
    background: var(--sc-bg);
}

/* Ribbons remain readable on portal navy atmosphere */
html[data-theme="portal"] .after-hero .sc-ribbons {
    mix-blend-mode: screen;
    opacity: 0.28;
}

html[data-theme="dark"] .after-hero .sc-ribbons {
    mix-blend-mode: screen;
}


html[data-theme="portal"] .header-cta,
html[data-theme="portal"] .about-more,
html[data-theme="portal"] .site-footer__subscribe button {
    background: var(--sc-gradient-primary);
    border-color: transparent;
    color: #fff !important;
}

html[data-theme="portal"] .header-cta i,
html[data-theme="portal"] .about-more i {
    color: #fff;
}

html[data-theme="portal"] .site-loader {
    background: linear-gradient(145deg, #0a1c33 0%, #0e2744 48%, #123a63 100%);
}