/* ═══════════════════════════════════════════════════════════════
   LIGHT THEME — public pages + console only.
   Active when <html data-theme="light"> (set by the nav toggle, stored in
   localStorage 'mv-theme'). The demos (projects/*) have their own fixed
   palettes and never load this file.
   Most components read the role tokens from tokens.css; the rules below
   only cover what is drawn with literal colours.
   ═══════════════════════════════════════════════════════════════ */

:root[data-theme="light"] {
    color-scheme: light;
    --scheme: light;

    --black:        #f6f5f1;   /* page: warm paper */
    --black-soft:   #ffffff;   /* cards */
    --white:        #15171c;   /* ink */

    --fg-rgb:       21,23,28;
    --fg2-rgb:      21,23,28;
    --fg-strong:    #0b0c0e;
    --text-1:       #1d1f24;
    --text-2:       #34363c;
    --text-2b:      #3f4147;
    --text-3:       #55575e;
    --text-4:       #63656c;
    --text-5:       #74767d;
    --text-6:       #84868d;
    --cyan-text:    #0b6f87;
    --input-bg:     #ffffff;
    --input-bg2:    #ffffff;
    --option-bg:    #ffffff;
    --scroll-track: #ecebe6;
    --scroll-thumb: #c7c6c0;
    --modal-bg:     #ffffff;
    --raised-bg:    #f0efea;

    --t-green:  #15803d;
    --t-green2: #166534;
    --t-red:    #b91c1c;
    --t-red2:   #b91c1c;
    --t-red3:   #dc2626;
    --t-sky:    #0369a1;
    --t-cyan2:  #0b6f87;
    --t-cyan3:  #0b6f87;
    --t-amber:  #b45309;
    --t-violet: #6d28d9;
    --t-ok:     #15803d;
    --t-warn:   #b45309;

    --green:      #16a34a;
    --green-haze: rgba(22,163,74,.1);
    --green-ring: rgba(22,163,74,.3);
    --red:        #dc2626;
    --red-haze:   rgba(220,38,38,.08);
    --red-ring:   rgba(220,38,38,.3);
    --amber:      #d97706;
    --amber-haze: rgba(217,119,6,.1);

    --violet:     #3b6fd4;
    --violet-glow: rgba(59,111,212,.16);
    --violet-haze: rgba(59,111,212,.07);
    --cyan-glow:  rgba(14,116,144,.14);
    --cyan-haze:  rgba(14,116,144,.07);
    --cyan-ring:  rgba(14,116,144,.4);

    /* service families: text-safe on paper */
    --fam-auto:   #0b7f96;
    --fam-data:   #b26a00;
    --fam-know:   #7c4ddb;
    --fam-models: #0f8a5f;

    --rule:       rgba(21,23,28,.12);
    --rule-2:     rgba(21,23,28,.2);
    --paper-dot:  radial-gradient(rgba(21,23,28,.05) 1px, transparent 1.3px);

    --shadow-md:  0 8px 24px rgba(20,22,28,.08);
    --shadow-lg:  0 20px 48px rgba(20,22,28,.1);
    --shadow-xl:  0 32px 80px rgba(20,22,28,.1), 0 8px 24px rgba(20,22,28,.06);

    --border-dark:  1px solid rgba(21,23,28,.1);
    --border-brand: 1px solid rgba(14,116,144,.3);
    --grad-hero:        radial-gradient(ellipse at 50% 0%, rgba(14,116,144,.06), transparent 60%);
    --grad-hero-subtle: radial-gradient(ellipse at 50% 0%, rgba(14,116,144,.04), transparent 60%);
    --grad-card:    linear-gradient(#fff, #fff);
    --grad-border:  linear-gradient(rgba(21,23,28,.1), rgba(21,23,28,.1));
    --grad-surface: linear-gradient(#fbfaf7, #fbfaf7);
    --glass-bg:     #ffffff;
    --glass-border: rgba(21,23,28,.1);
    --glass-hover:  #efeee9;
    --glass-strong: #fbfaf7;
    --border:       1px solid rgba(21,23,28,.1);

    --nav-bg:         #ffffff;
    --nav-text:       rgba(21,23,28,.6);
    --nav-text-hover: #0b0c0e;
    --nav-active:     rgba(21,23,28,.08);
    --nav-hover:      rgba(21,23,28,.05);
    --nav-accent:     #0369a1;
}

/* The home hero is a dark WebGL stage in both themes: inside it the dark
   role tokens come back, so its text and glass keep their contrast. */
:root[data-theme="light"] .shader-hero {
    --fg-rgb: 255,255,255; --fg2-rgb: 245,244,239; --fg-strong: #fff;
    --white: #f5f4ef; --text-1: #ecebe6; --text-2: #c9c8c2; --text-3: #a1a1a8; --text-4: #8a8a93;
    --cyan-text: #22b8cf;
    color: var(--text-1);
}

/* Demo accents are tuned for the dark page: on paper they get deeper ink */
:root[data-theme="light"] [style*="--acc"] { --acc-ink: color-mix(in srgb, var(--acc) 66%, #000); }
:root[data-theme="light"] body.pub .panel-cta,
:root[data-theme="light"] .plate-mark,
:root[data-theme="light"] .type-ico,
:root[data-theme="light"] .demo-ico,
:root[data-theme="light"] .con-icon { color: var(--acc-ink, inherit); }
:root[data-theme="light"] a.panel-card:hover .plate-mark { color: #fff; }

/* Glass nav on paper */
:root[data-theme="light"] body.pub .nav { background: rgba(246,245,241,.82); }

:root[data-theme="light"] ::selection { background: rgba(14,116,144,.2); }

/* ── Theme toggle (public nav + console nav) ── */
.theme-tgl {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; min-width: 36px; padding: 0; flex-shrink: 0;
    border: 1px solid rgba(var(--fg-rgb),.14); border-radius: 50%;
    background: none; color: var(--text-3); cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.theme-tgl:hover { color: var(--white); border-color: rgba(var(--fg-rgb),.3); background: rgba(var(--fg-rgb),.05); }
.theme-tgl:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.theme-tgl svg { width: 16px; height: 16px; transition: transform .35s var(--ease-out); }
.theme-tgl .i-sun { display: none; }
:root[data-theme="light"] .theme-tgl .i-sun { display: block; }
:root[data-theme="light"] .theme-tgl .i-moon { display: none; }
.theme-tgl:active svg { transform: rotate(-30deg) scale(.9); }
/* Console bar on phones: links collapse into the burger, keep the toggle with the language */
@media (max-width: 768px) {
    .app-nav .theme-tgl { order: 8; margin-left: auto; }
    .app-nav .nav-lang-dd--console { margin-left: .25rem; }
}