/* ICT-Fachassessment · Design «Zukunft», Variante «Tageslicht» (hell)
   ------------------------------------------------------------------
   Lädt NACH zukunft.css (media="screen": Ausdruck und PDF bleiben unverändert) und gilt nur, wenn
   assets/js/zukunft-theme.js <html data-theme="light"> setzt: bei «Automatisch» mit hellem System oder wenn
   die Besucherin «Hell» gewählt hat. Dunkel steht in zukunft.css und gilt auch ohne JavaScript.

   Aufbau: Die Bausteine in zukunft.css rechnen mit Tokens (--zk-*, Farbkanäle --zk-*-rgb). Hier werden nur die
   Werte getauscht und die wenigen Stellen angepasst, die in Dunkel feste Farben tragen.
   Vorbild: swiss-jobrollen-check.ch und absofort.ch (hellblauer Grund, weisse Karten, dieselben Akzente
   Violett/Cyan/Mint als dunkle Textfarben).

   Kontraste (WCAG AA), gerechnet gegen Weiss bzw. den Grund #eef2f9:
   Text #0d1530 ~17:1, Lead #1b2848 ~14:1, gedämpft #26345a ~11:1, blass #3c4a6b ~8:1,
   Cyan-Text #006477 ~6.8:1, Violett #5540ad ~7.8:1, Mint-Text #176344 ~7.9:1, Amber #8a3c0b ~7.9:1,
   Rot #a61b1b ~7.6:1, Knopftext Weiss auf Verlauf #5a3fd4..#137a4f >= 5.3:1, Feldrand #66779a ~4.4:1. */

:root[data-theme="light"] { background: #eef2f9; }
:root[data-theme="light"]:has(body.zk) { color-scheme: light; }

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

  --zk-violet: #5540ad;
  --zk-indigo: #43318f;
  --zk-cyan: #006477;
  --zk-mint: #176344;
  --zk-grad: linear-gradient(105deg, #5a3fd4, #0e7898 58%, #137a4f);
  --zk-btn-ink: #ffffff;
  --zk-grad-a: #5b3fd6;
  --zk-grad-text: linear-gradient(105deg, #5b3fd6, #0a7f9e 55%, #12805a);
  --zk-violet-soft: #43318f;
  --zk-violet-2: #5540ad;
  --zk-blue-soft: #1d4ed8;
  --zk-green-soft: #176344;
  --zk-ok-soft: #14553b;
  --zk-err-line: #c53030;
  --zk-err-soft: #8f1d1d;
  --zk-placeholder: #5b6885;
  --zk-autofill: #e8f0fe;
  --zk-focus-btn: #0d1530;

  --zk-cyan-rgb: 0, 100, 119;
  --zk-mint-rgb: 23, 99, 68;
  --zk-violet-rgb: 90, 63, 212;
  --zk-indigo-rgb: 90, 63, 212;
  --zk-warn-rgb: 180, 83, 9;
  --zk-err-rgb: 185, 28, 28;
  --zk-wash-rgb: 25, 36, 59;
  --zk-shadow-rgb: 30, 49, 88;
  --zk-deep-rgb: 231, 237, 249;
  --zk-bg-rgb: 248, 250, 254;
  --zk-panel-rgb: 255, 255, 255;
  --zk-sky-star: 85, 64, 173;
  --zk-sky-a: 0, 120, 144;
  --zk-sky-b: 90, 63, 212;
  --zk-sky-kraft: .8;

  --zk-bg: #eef2f9;
  --zk-bg-deep: #e4eaf6;
  --zk-surface: #ffffff;
  --zk-surface-2: #f3f6fb;
  --zk-glass: rgba(255, 255, 255, .9);
  --zk-glass-strong: rgba(255, 255, 255, .97);
  --zk-tint: rgba(0, 100, 119, .06);
  --zk-line: rgba(25, 36, 59, .16);
  --zk-line-strong: rgba(25, 36, 59, .30);
  --zk-line-violet: rgba(90, 63, 212, .34);

  --zk-text: #0d1530;
  --zk-lead: #1b2848;
  --zk-muted: #26345a;
  --zk-faint: #3c4a6b;

  --zk-field: #ffffff;
  --zk-field-border: #66779a;
  --zk-field-hover: #43527a;
  --zk-focus: #5540ad;

  --zk-ok: #176344;
  --zk-ok-bg: rgba(23, 99, 68, .09);
  --zk-warn: #8a3c0b;
  --zk-warn-bg: rgba(180, 83, 9, .10);
  --zk-err: #a61b1b;
  --zk-err-bg: rgba(185, 28, 28, .08);

  --alp-shadow: 0 14px 38px rgba(30, 49, 88, .12);
  --alp-shadow-sm: 0 6px 18px rgba(30, 49, 88, .09);
  --shadow-sm: 0 6px 18px rgba(30, 49, 88, .09);
  --shadow: 0 14px 38px rgba(30, 49, 88, .12);
  --shadow-lg: 0 22px 56px rgba(30, 49, 88, .16);

  scrollbar-color: #b5c2d8 transparent;
}

/* ---------- Grund, Auswahl ---------- */
:root[data-theme="light"] body.zk ::selection { background: #5540ad; color: #ffffff; }

/* ---------- Himmel: Morgenlicht statt Nacht ---------- */
:root[data-theme="light"] .zk-sky {
  background:
    radial-gradient(1100px 620px at 82% -12%, rgba(120, 96, 235, .30), transparent 62%),
    radial-gradient(800px 520px at 4% 70%, rgba(30, 190, 215, .20), transparent 60%),
    radial-gradient(700px 420px at 50% 110%, rgba(80, 220, 170, .16), transparent 62%),
    var(--zk-bg);
}
:root[data-theme="light"] .zk-nebula-a { background: radial-gradient(circle, rgba(120, 96, 235, .42), transparent 68%); }
:root[data-theme="light"] .zk-nebula-b { background: radial-gradient(circle, rgba(30, 190, 215, .30), transparent 68%); }
:root[data-theme="light"] .zk-sky::before { opacity: .5; }
:root[data-theme="light"] .zk-rocket { filter: drop-shadow(0 16px 26px rgba(30, 49, 88, .24)); }

/* ---------- Kopf, Menüs ---------- */
:root[data-theme="light"] body.zk .alp-header,
:root[data-theme="light"] body.zk > header { background: rgba(255, 255, 255, .84); }
:root[data-theme="light"] body.zk .lang-menu,
:root[data-theme="light"] body.zk .zk-theme-menu { background: #ffffff; }
:root[data-theme="light"] body.zk .lang-current { background: rgba(0, 100, 119, .06); }

/* ---------- Knöpfe ---------- */
:root[data-theme="light"] body.zk :is(.alp-btn-primary, .btn-primary, .btn-hero, .btn-success) {
  box-shadow: 0 8px 22px rgba(85, 64, 173, .28), inset 0 1px 0 rgba(255, 255, 255, .25);
}

/* ---------- Nachtinseln: dunkle Kästen mit fester weisser Schrift bleiben dunkel (Tokens siehe zukunft.css, Abschnitt 2) ---------- */
:root[data-theme="light"] body.zk :is(.zk-nacht, .rl-cta, .lp-cta, .ro-cta, .tw-cta, .co-hero, .lead-wrap, .res-summary, section[style*="color:#fff"]) {
  background: radial-gradient(120% 140% at 0% 0%, #2a1f6e 0%, #0f1430 55%, #070a13 100%) !important;
  border-color: rgba(164, 146, 255, .35); color: var(--zk-text);
  box-shadow: 0 18px 50px rgba(30, 49, 88, .22);
}
:root[data-theme="light"] body.zk .alp-section--dark { background: radial-gradient(120% 140% at 50% 0%, #2a1f6e 0%, #0f1430 55%, #070a13 100%); color: var(--zk-text); }
:root[data-theme="light"] body.zk.zk-start .zk-sec-final { background: transparent; }

/* Fusszeilen-Links mit fest weisser Inline-Farbe */
:root[data-theme="light"] body.zk :is(.alp-footer, footer) a[style*="255,255,255"] { color: var(--zk-lead) !important; }
:root[data-theme="light"] body.zk :is(.pro-side-inst, .admin-sidebar-logo, .admin-sidebar-logo span) { color: var(--zk-text); }