/* =========================================================================
   Light theme (feature F13).
   Dark is the default (the base :root tokens). settings.js / theme-boot.js set
   data-theme-effective="light" on <html> when the user chooses Light, or Auto
   under a light OS. One attribute drives everything -- no media-query copies.
   This file loads LAST so its overrides win.
   ========================================================================= */

:root[data-theme-effective="light"] {
    /* Surfaces -- clean, faintly green-tinted light */
    --wm-bg:          #f2f6f4;
    --wm-surface:     #ffffff;
    --wm-surface-alt: #eef4f0;
    --wm-surface-hi:  #e4ece7;
    --wm-border:      #d7e3dc;
    --wm-border-hi:   #bcd0c6;

    /* Text -- deep green-ink */
    --wm-text:        #0f1f18;
    --wm-text-muted:  #4c6658;
    --wm-text-faint:  #87a093;

    /* Accents -- deep teal keeps contrast on white; fills pair with --wm-bg text */
    --wm-accent:      #0f766e;
    --wm-accent-hi:   #115e59;
    --wm-accent-dim:  #14b8a6;

    /* Status tints, re-balanced for a light panel */
    --wm-safe-bg:     rgba(0, 150, 75, 0.10);
    --wm-info-bg:     rgba(30, 140, 200, 0.10);
    --wm-warning-bg:  rgba(190, 140, 0, 0.14);
    --wm-leak-bg:     rgba(214, 48, 48, 0.10);
    --wm-disabled-bg: rgba(74, 107, 88, 0.10);

    /* Softer, cooler shadows for a light surface */
    --wm-shadow-1:    0 1px 2px rgba(16, 40, 30, .08), 0 0 0 1px var(--wm-border);
    --wm-shadow-2:    0 6px 20px rgba(16, 40, 30, .12), 0 0 0 1px var(--wm-border-hi);
    --wm-shadow-3:    0 12px 32px rgba(16, 40, 30, .16);

    /* The nav slide-in panel + cookie banner use a SEPARATE token family
       (--wm-panel*, --wm-line, --wm-aqua) with hardcoded dark fallbacks that are
       never defined. Defining them here flips both to light. */
    --wm-panel:       var(--wm-surface);
    --wm-panel-2:     var(--wm-surface-alt);
    --wm-line:        var(--wm-border);
    --wm-aqua:        var(--wm-accent);
}

/* That cookie "OK" button hardcodes near-black text on the teal fill; on the
   light deep-teal it needs light text instead. */
:root[data-theme-effective="light"] .wm-cookie__btn--primary { color: #ffffff; }

/* Page background: drop the dark radial glows for a clean light wash. */
:root[data-theme-effective="light"] body {
    background:
        radial-gradient(1100px 760px at 15% -10%, rgba(15, 118, 110, .06), transparent 55%),
        radial-gradient(900px 700px at 90% 110%, rgba(0, 150, 75, .04), transparent 60%),
        var(--wm-bg);
}

/* ---- Hardcoded white overlays that don't adapt on their own ------------- */

/* Connection row (IP / Location / ISP / ASN) text was bare white. */
:root[data-theme-effective="light"] .wm-connid__label { color: var(--wm-text-muted); }
:root[data-theme-effective="light"] .wm-connid__val   { color: var(--wm-text); }
:root[data-theme-effective="light"] .wm-connid__val[data-loading="1"] { color: var(--wm-text-faint); }
:root[data-theme-effective="light"] .wm-vpn-asn       { color: var(--wm-text-muted); }
:root[data-theme-effective="light"] .wm-devsys-sub__label { color: var(--wm-text-muted); }

/* Subtle white panel fills / borders -> faint dark tints so they stay visible. */
:root[data-theme-effective="light"] .wm-connid {
    background: var(--wm-surface);
    border-color: var(--wm-border);
}

/* Gauge arc track + ticks were white-on-dark; invert to dark-on-light. */
:root[data-theme-effective="light"] .wm-gauge__track { stroke: rgba(16, 40, 30, 0.12); }
:root[data-theme-effective="light"] .wm-gauge__ticks line,
:root[data-theme-effective="light"] .wm-gauge__ticks { stroke: rgba(16, 40, 30, 0.22); }
:root[data-theme-effective="light"] .wm-gauge__needle { filter: drop-shadow(0 1px 2px rgba(16, 40, 30, 0.25)); }

/* Pay-vs-get progress track (was a white overlay). */
:root[data-theme-effective="light"] .wm-plan-attain__bar { background: rgba(16, 40, 30, 0.08); }

/* Sticky header bar + footer used a hardcoded dark wash (not a token). */
:root[data-theme-effective="light"] .wm-topbar {
    background: rgba(242, 246, 244, 0.85);
    border-bottom-color: var(--wm-border);
}
:root[data-theme-effective="light"] .wm-footer {
    background: rgba(238, 244, 240, 0.7);
}

/* Report-card mat + the ISP "My numbers" card were a dark-blue gradient with a
   bright aquamarine border. Flip to a light surface + token border. The cream
   certificate inside keeps its paper look and now frames cleanly. */
:root[data-theme-effective="light"] .wm-report__card,
:root[data-theme-effective="light"] .wm-isp-card {
    background: linear-gradient(180deg, var(--wm-surface), var(--wm-surface-alt));
    border-color: var(--wm-border-hi);
}

/* Settings-panel scrim stays a dark wash (works over a light page too), so no
   change needed there. The sheet itself is token-driven and flips automatically. */