/* =========================================================================
 *  ATOM ISP — Public Portal LIGHT THEME OVERLAY
 *  Loaded AFTER e1-public.css. Re-defines the same CSS custom properties
 *  and overrides only the most prominent dark backgrounds with semantic
 *  light scheme values so the dark blue/violet visualisation is replaced
 *  by light grey + dark red (per branding spec).
 *
 *  Atomic markup contract: every element in templates uses class names
 *  defined in e1-public.css (`e1-container`, `e1-hero`, etc.) and
 *  these tokens — so this overlay applies automatically to every page.
 * =========================================================================
 */
:root {
    /* Force light semantic base */
    color-scheme: light;

    /* Light grey background palette */
    --bg-0:        #f4f4f6;   /* page */
    --bg-1:        #ffffff;   /* surface */
    --bg-2:        #fafafb;   /* soft section */
    --bg-3:        #e9eaee;   /* divider */

    /* Override the dark surface tokens */
    --surface:        #ffffff;
    --surface-elev:   #ffffff;
    --border-1:       rgba(127, 29, 29, 0.12);   /* dark-red tinted */
    --border-2:       rgba(127, 29, 29, 0.28);
    --border-strong:  rgba(185, 28, 28, 0.55);  /* primary dark-red */

    /* Text foreground (dark text, contrary to dark scheme) */
    --t-fg:        #14161a;
    --t-fg-soft:   #3b3f48;
    --t-fg-mute:   #6b7280;
    --t-fg-quiet:  #8b8f99;

    /* Accent palette: dark RED primary, soft red secondary */
    --c-red:        #b91c1c;   /* primary dark red */
    --c-red-bright: #dc2626;   /* hover */
    --c-red-deep:   #7f1d1d;   /* deep */
    --c-red-soft:   #fee2e2;   /* soft tint */
    --c-red-50:     #fef2f2;

    /* Aliases used by e1-public.css (the dark theme originally bound these
     * to indigo / cyan / violet) */
    --c-blue:       #b91c1c;        /* link = primary red */
    --c-cyan:       #dc2626;        /* accent = bright red */
    --c-indigo:     #7f1d1d;
    --c-violet:     #b91c1c;
    --c-amber:      #d97706;
    --c-green:      #16a34a;
    --c-rose:       #dc2626;
    --c-pink:       #be185d;

    /* Glows / shadows */
    --glow-cyan:  0 0 24px rgba(185, 28, 28, 0.18), 0 0 60px rgba(185, 28, 28, 0.10);
    --glow-blue:  0 0 24px rgba(185, 28, 28, 0.20), 0 0 60px rgba(185, 28, 28, 0.10);
    --glow-violet:0 0 30px rgba(127, 29, 29, 0.22);
}

/* ─── Reinforce light page chrome ─── */
html { background: var(--bg-0); }
body { background: var(--bg-0); color: var(--t-fg); }

/* All .e1-* section surfaces go white instead of dark */
.e1-hero, .e1-hero-bg {
    background: linear-gradient(180deg, #ffffff 0%, var(--bg-2) 100%);
}
.e1-section, .e1-feature, .e1-pricing, .e1-card,
.section, .feature-card, .plan-card {
    background: #ffffff;
    color: var(--t-fg);
}

/* Buttons — primary is red, ghost on light */
.btn-primary, .e1-btn-primary {
    background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-bright) 100%);
    color: #ffffff;
    border: none;
}
.btn-primary:hover, .e1-btn-primary:hover {
    background: linear-gradient(135deg, var(--c-red-deep) 0%, var(--c-red) 100%);
}
.btn-ghost, .e1-btn-ghost {
    background: #ffffff;
    color: var(--t-fg);
    border: 1px solid rgba(20, 22, 26, 0.16);
}
.btn-ghost:hover, .e1-btn-ghost:hover {
    border-color: var(--c-red);
    color: var(--c-red);
}

/* Headlines on light surfaces — deep dark-red gradient instead of cyan/violet */
.e1-grad, .e1-h1, h1.e1-hero-text, .e1-hero-text h1 {
    background: linear-gradient(135deg, var(--c-red) 0%, var(--c-red-bright) 60%, var(--c-red) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Force text on dark glass surfaces (overlay panels) */
.e1-hero-bg { color: var(--t-fg); }
.e1-hero-text, .e1-hero-text * { color: var(--t-fg); }
.kicker, .kicker * { color: var(--c-red-deep); }

/* Subtle red-tinted selection */
::selection {
    background: rgba(185, 28, 28, 0.18);
    color: var(--c-red-deep);
}

/* Decorative blobs on hero — soft red glow instead of cyan/violet */
.blob.b1 { background: radial-gradient(closest-side, rgba(185, 28, 28, 0.10), rgba(220,38,38,0.05)); }
.blob.b2 { background: radial-gradient(closest-side, rgba(127, 29, 29, 0.10), rgba(220,38,38,0.04)); }
.blob.b3 { background: radial-gradient(closest-side, rgba(252, 165, 165, 0.16), rgba(220,38,38,0.05)); }
.fiber-line { background: linear-gradient(90deg, transparent, var(--c-red), transparent); }

/* Marquee ticker */
.e1-marquee-track { background: var(--bg-3); color: var(--t-fg); }
.e1-marquee-track i { color: var(--c-red); }

/* Glassmorphism layers -> solid light cards */
.e1-glass, .glass-card {
    background: #ffffff;
    border: 1px solid rgba(127, 29, 29, 0.10);
    box-shadow: 0 6px 22px -10px rgba(127, 29, 29, 0.18);
}

/* Tables */
table, td, th {
    background: #ffffff;
    color: var(--t-fg);
}

/* Inputs */
input, textarea, select {
    background: #ffffff;
    color: var(--t-fg);
    border: 1px solid rgba(20, 22, 26, 0.14);
}

/* Override dark-theme shadows / glows */
.hero-glow, .e1-glow { background: var(--bg-2); }

/* Particles canvas — keep but tone down */
canvas#e1Particles { opacity: 0.35; }

/* Footer */
footer, .e1-footer {
    background: #ffffff;
    color: var(--t-fg-soft);
    border-top: 1px solid rgba(127, 29, 29, 0.10);
}
footer a, .e1-footer a { color: var(--c-red); }