/* ZIKIT (the chameleon): colour tokens for every section. Session 103 stage 3, extended to SIX themes in Session 104.
   A section is switched with two attributes on its ROOT element:
     data-zk="<theme>"            one of the six themes below
     data-zk-slot="brand"         (zebra themes only: this section is the brand-colour one; the others are neutral)
   and ONE custom property: --zk-brand: #rrggbb   (the client's brand colour, set on the root, the page or <body>).
   Themes (the future landing-page templates):
     minimal-dark       theme-minimal-dark        near black, flat, brand only in small accents
     minimal-light      theme-minimal-light       white, flat, hairlines, brand only in small accents
     rich-levin         theme-rich-levin          light, warm tint, soft shadows, accent font "Gveret Levin" (--zk-font-accent)
     vsl-zebra-dark     theme-vsl-zebra-dark      zebra: brand section (white text, white button), then a DARK neutral section, alternating
     vsl-zebra-light    theme-vsl-zebra-light     zebra: the SAME brand section, then a LIGHT neutral section, alternating
     badihi-gray        theme-badihi-gray         light on the Badihi grey #f5f5f5, white cards, ink #2d2d2d, strong brand touches
   The old names dark, light, zebra-dark, zebra-light, vsl-zebra-dark, vsl-zebra-light still work (aliases; both zebra names point to the single light zebra).
   Without data-zk nothing here applies and every section keeps its original colours (each section CSS uses var(--zk-x, original)).
   zikit.js (tools/zikit.js) computes the contrast-critical tokens exactly (WCAG, normal text 4.5:1): --zk-on-brand, --zk-accent, --zk-card on a brand slot, button colours.
   The values below are the CSS-only fallbacks (color-mix), so a page without the script still gets a sensible theme.
   Sizes, spacing and structure never live here. The ONLY font token is --zk-font-accent: `inherit` in every theme except rich-levin, where it is "Gveret Levin" (sections use font-family: var(--zk-font-accent, inherit) on accents, sub titles and margin texts). */
@font-face { font-family: "Gveret Levin"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/gveret-levin-he.woff2") format("woff2"), url("../assets/fonts/gveret-levin-regular.ttf") format("truetype"); }
[data-zk] {
  --zk-brand: #2b59d6;
  --zk-page: #fff;
  --zk-font-accent: inherit;
  --zk-brand-a: color-mix(in oklab, var(--zk-brand), white 14%);
  --zk-brand-b: color-mix(in oklab, var(--zk-brand), black 32%);
  --zk-btn-a: var(--zk-brand-a);
  --zk-btn-b: var(--zk-brand-b);
  --zk-btn-a-h: color-mix(in oklab, var(--zk-brand-a), white 10%);
  --zk-btn-b-h: color-mix(in oklab, var(--zk-brand-b), white 6%);
  --zk-on-btn: #fff;
  --zk-glow: color-mix(in srgb, var(--zk-brand-b) 38%, transparent);
  --zk-card-2: color-mix(in srgb, var(--zk-brand) 8%, var(--zk-card, #fff));
  --zk-line-m: color-mix(in srgb, var(--zk-line-a, var(--zk-brand)) 55%, transparent);
  --zk-icon-a: var(--zk-accent, var(--zk-brand));
  --zk-icon-b: color-mix(in srgb, var(--zk-accent, var(--zk-brand)) 78%, #000);
  --zk-banner-bg: linear-gradient(135deg, var(--zk-btn-a), var(--zk-btn-b));
  --zk-poster-b: color-mix(in srgb, var(--zk-btn-b) 78%, #000);
  --zk-poster-c: color-mix(in srgb, var(--zk-btn-b) 40%, #000);
  --zk-glow-blob: color-mix(in srgb, var(--zk-brand) 12%, transparent);
}
/* dark themes (neutral slot) */
[data-zk="minimal-dark"], [data-zk="dark"], [data-zk="vsl-zebra-dark"], [data-zk="zebra-dark"] {
  --zk-bg: #121212;
  --zk-card: color-mix(in srgb, var(--zk-brand) 8%, #121212);
  --zk-text: #fff;
  --zk-text-2: rgba(255, 255, 255, .8);
  --zk-text-q: rgba(255, 255, 255, .92);
  --zk-accent: color-mix(in oklab, var(--zk-brand) 50%, white);
  --zk-line-a: color-mix(in srgb, var(--zk-accent) 90%, transparent);
  --zk-line-b: rgba(255, 255, 255, .2);
  --zk-line-c: color-mix(in srgb, var(--zk-brand) 5%, transparent);
  --zk-hair: rgba(255, 255, 255, .18);
  --zk-mark: color-mix(in srgb, var(--zk-brand) 38%, transparent);
  --zk-shadow: none;
  --zk-focus: var(--zk-accent);
}
/* 1 minimal dark: the blackest page, flat cards, hairlines only */
[data-zk="minimal-dark"] {
  --zk-bg: #0b0b0c;
  --zk-card: #151517;
  --zk-hair: rgba(255, 255, 255, .12);
  --zk-line-b: rgba(255, 255, 255, .14);
  --zk-line-c: transparent;
  --zk-mark: color-mix(in srgb, var(--zk-brand) 30%, transparent);
}
/* light themes (neutral slot) */
[data-zk="minimal-light"], [data-zk="light"], [data-zk="vsl-zebra"], [data-zk="vsl-zebra-light"], [data-zk="zebra-light"], [data-zk="rich-levin"], [data-zk="badihi-gray"] {
  --zk-bg: color-mix(in srgb, var(--zk-brand) 6%, #fff);
  --zk-card: #fff;
  --zk-text: #14202f;
  --zk-text-2: #44536a;
  --zk-text-q: #2a3a50;
  --zk-accent: color-mix(in oklab, var(--zk-brand), black 28%);
  --zk-line-a: color-mix(in srgb, var(--zk-brand) 55%, transparent);
  --zk-line-b: rgba(20, 32, 47, .1);
  --zk-line-c: transparent;
  --zk-hair: rgba(20, 32, 47, .16);
  --zk-mark: color-mix(in srgb, var(--zk-brand) 28%, transparent);
  --zk-shadow: 0 8px 24px rgba(20, 32, 47, .1), 0 1px 3px rgba(20, 32, 47, .1);
  --zk-focus: var(--zk-accent);
}
/* 2 minimal light: pure white, flat, no shadows */
[data-zk="minimal-light"] {
  --zk-bg: #fff;
  --zk-card: #fafafa;
  --zk-hair: rgba(20, 32, 47, .12);
  --zk-line-b: rgba(20, 32, 47, .08);
  --zk-mark: color-mix(in srgb, var(--zk-brand) 18%, transparent);
  --zk-shadow: 0 10px 28px rgba(20, 32, 47, .09), 0 2px 6px rgba(20, 32, 47, .07);
}
/* 3 rich light: warm tinted page, white cards, deeper shadows, the accent font */
[data-zk="rich-levin"] {
  --zk-font-accent: "Gveret Levin", "Noto Sans Hebrew", cursive;
  --zk-bg: color-mix(in srgb, var(--zk-brand) 9%, #fffaf2);
  --zk-card: #fff;
  --zk-text-2: #3f4a5e;
  --zk-mark: color-mix(in srgb, var(--zk-brand) 30%, #ffe9a8);
  --zk-shadow: 0 14px 36px rgba(20, 32, 47, .14), 0 2px 6px rgba(20, 32, 47, .1);
}
/* 6 Badihi grey: grey page #f5f5f5, white cards, ink #2d2d2d (the grey and ink of the agency sections 84-96), strong brand touches */
[data-zk="badihi-gray"] {
  /* Light-Gray & Brand Contrast: see .claude/skills/zikit/modes/light-gray-brand-contrast.md */
  --zk-white: #ffffff;
  --zk-card-2: #d8d8d8; /* neutral studio grey behind photos and placeholders */
  --zk-soft-gray: #f4f5f7;
  --zk-charcoal: #262626;
  --zk-pain: #eb4d4b;
  --zk-pain-strong: #ff2e4c;
  --zk-marker-soft: #fff3b0;
  --zk-bg: #f4f5f7;
  --zk-card: #fff;
  --zk-text: #262626;
  --zk-text-2: #4a4a4a;
  --zk-text-q: #333333;
  --zk-accent: var(--zk-brand);
  --zk-hair: rgba(45, 45, 45, .2);
  --zk-line-b: rgba(45, 45, 45, .14);
  --zk-mark: color-mix(in srgb, var(--zk-brand) 26%, transparent);
  --zk-shadow: 0 6px 18px rgba(45, 45, 45, .1);
  --zk-btn-a: var(--zk-brand);
  --zk-btn-b: var(--zk-brand);
  --zk-btn-a-h: color-mix(in oklab, var(--zk-brand), black 10%);
  --zk-btn-b-h: color-mix(in oklab, var(--zk-brand), black 10%);
}
/* the brand-colour slot of a zebra (the whole section background IS the brand colour; every other colour derives from it, skill 2a) */
[data-zk][data-zk-slot="brand"] {
  --zk-on-brand: #fff;
  --zk-bg: var(--zk-brand);
  --zk-card: color-mix(in srgb, var(--zk-on-brand) 14%, var(--zk-brand));
  --zk-text: var(--zk-on-brand);
  --zk-text-2: color-mix(in srgb, var(--zk-on-brand) 88%, var(--zk-brand));
  --zk-text-q: color-mix(in srgb, var(--zk-on-brand) 94%, var(--zk-brand));
  --zk-accent: var(--zk-on-brand);
  --zk-line-a: color-mix(in srgb, var(--zk-on-brand) 70%, transparent);
  --zk-line-b: color-mix(in srgb, var(--zk-on-brand) 25%, transparent);
  --zk-line-c: transparent;
  --zk-hair: color-mix(in srgb, var(--zk-on-brand) 35%, transparent);
  --zk-mark: color-mix(in srgb, var(--zk-on-brand) 22%, transparent);
  --zk-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  --zk-btn-a: var(--zk-on-brand);
  --zk-btn-b: color-mix(in srgb, var(--zk-on-brand) 90%, var(--zk-brand));
  --zk-btn-a-h: color-mix(in srgb, var(--zk-on-brand) 94%, var(--zk-brand));
  --zk-btn-b-h: color-mix(in srgb, var(--zk-on-brand) 84%, var(--zk-brand));
  --zk-on-btn: var(--zk-brand-b);
  --zk-glow: rgba(0, 0, 0, .25);
  --zk-focus: var(--zk-on-brand);
}

/* REAL GOLD (Zikit.apply with gold: true): accent words and numbers get the metallic gold gradient as gradient text. Each converted section adds its accent selectors to this list. */
[data-zk-gold] .c-wzd__key, [data-zk-gold] .c-wzd__n, [data-zk-gold] .c-ntk__key, [data-zk-gold] .c-wyg__key, [data-zk-gold] .c-nwi__qt, [data-zk-gold] .c-hre__l2 {
  background: var(--zk-accent-fill); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
[data-zk-gold] .c-ntk__key .c-ntk__bar { -webkit-text-fill-color: var(--zk-text, #14202f); }

/* FAQ plus / minus marks are WHITE in the light themes (Liav, Session 105); dark themes keep the label colour of the button */
[data-zk="minimal-light"] .c-nwi__pm::before, [data-zk="minimal-light"] .c-nwi__pm::after, [data-zk="light"] .c-nwi__pm::before, [data-zk="light"] .c-nwi__pm::after, [data-zk="rich-levin"] .c-nwi__pm::before, [data-zk="rich-levin"] .c-nwi__pm::after, [data-zk="vsl-zebra-light"] .c-nwi__pm::before, [data-zk="vsl-zebra-light"] .c-nwi__pm::after, [data-zk="vsl-zebra"] .c-nwi__pm::before, [data-zk="vsl-zebra"] .c-nwi__pm::after, [data-zk="zebra-light"] .c-nwi__pm::before, [data-zk="zebra-light"] .c-nwi__pm::after, [data-zk="badihi-gray"] .c-nwi__pm::before, [data-zk="badihi-gray"] .c-nwi__pm::after { background: #fff; }

/* Headline words with a marker bar behind them (brand-colour bar on dark themes): the word itself is the text colour, never brand on brand (Liav, Session 105) */
[data-zk="minimal-dark"] .c-nwi__acc, [data-zk="minimal-dark"] .c-cdp__acc, [data-zk="minimal-dark"] .c-cds__acc, [data-zk="minimal-dark"] .c-cdf__acc, [data-zk="minimal-dark"] .c-cdc__acc, [data-zk="dark"] .c-nwi__acc, [data-zk="dark"] .c-cdp__acc, [data-zk="dark"] .c-cds__acc, [data-zk="dark"] .c-cdf__acc, [data-zk="dark"] .c-cdc__acc, [data-zk="vsl-zebra-dark"] .c-nwi__acc, [data-zk="vsl-zebra-dark"] .c-cdp__acc, [data-zk="vsl-zebra-dark"] .c-cds__acc, [data-zk="vsl-zebra-dark"] .c-cdf__acc, [data-zk="vsl-zebra-dark"] .c-cdc__acc, [data-zk="zebra-dark"] .c-nwi__acc, [data-zk="zebra-dark"] .c-cdp__acc, [data-zk="zebra-dark"] .c-cds__acc, [data-zk="zebra-dark"] .c-cdf__acc, [data-zk="zebra-dark"] .c-cdc__acc, [data-zk="minimal-dark"] .c-nwt__acc, [data-zk="dark"] .c-nwt__acc, [data-zk="vsl-zebra-dark"] .c-nwt__acc, [data-zk="zebra-dark"] .c-nwt__acc, [data-zk="minimal-dark"] .c-hwa__acc, [data-zk="dark"] .c-hwa__acc, [data-zk="vsl-zebra-dark"] .c-hwa__acc, [data-zk="zebra-dark"] .c-hwa__acc { color: var(--zk-text, #fff); }

/* decorative glow blobs of the original sections are hidden inside ZIKIT themes: every section of a theme has ONE flat background, so stacked sections are the same colour (Liav, Session 105) */
.c-hwa[data-zk]::before { display: none; }

.c-cwa[data-zk] .c-cwa__glow { display: none; }

/* 155: the red X and green V are semantic and stay red / green, lighter on dark so the bare glyph and the legend keep 3:1 (large text / icon) */
.c-cwa[data-zk="minimal-dark"], .c-cwa[data-zk="dark"], .c-cwa[data-zk="vsl-zebra-dark"], .c-cwa[data-zk="zebra-dark"] { --no: #ff8577; --yes: #4ade80; }

/* BADIHI GRAY, section roles (Liav, Session 105; rules in .claude/skills/zikit/modes/light-gray-brand-contrast.md). Surfaces white / gray / charcoal come from Zikit.apply(el, { surf }). Pain red, charcoal and white are FIXED for every brand; only the blue is replaced by the brand colour. */
.c-fma[data-zk="badihi-gray"] .c-fma__form { background: var(--zk-btn-b); border-color: transparent; box-shadow: var(--zk-shadow); }
.c-fma[data-zk="badihi-gray"] .c-fma__l, .c-fma[data-zk="badihi-gray"] .c-fma__note { color: #fff; }
.c-fma[data-zk="badihi-gray"] .c-fma__i { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .55); color: #fff; }
.c-fma[data-zk="badihi-gray"] .c-fma__i::placeholder { color: rgba(255, 255, 255, .92); }
.c-fma[data-zk="badihi-gray"] .c-fma__i:focus-visible { background: rgba(255, 255, 255, .28); border-color: #fff; outline-color: #fff; }
.c-fma[data-zk="badihi-gray"] .c-fma__btn { background: var(--zk-charcoal); color: #fff; box-shadow: none; }
.c-cwa[data-zk="badihi-gray"] .c-cwa__box--no { background: var(--zk-charcoal); border-color: var(--zk-charcoal); box-shadow: none; }
.c-cwa[data-zk="badihi-gray"] .c-cwa__box--yes { background: var(--zk-btn-b); border-color: var(--zk-btn-b); box-shadow: none; --b: var(--zk-charcoal); }
.c-cwa[data-zk="badihi-gray"] .c-cwa__box p, .c-cwa[data-zk="badihi-gray"] .c-cwa__legend { color: #fff; }
.c-cwa[data-zk="badihi-gray"] .c-cwa__box--no .c-cwa__ic::after { background: var(--zk-pain); }
.c-cwa[data-zk="badihi-gray"] .c-cwa__box--yes .c-cwa__ic::after { background: #fff; }
.c-cwa[data-zk="badihi-gray"] .c-cwa__box--yes .c-cwa__btn { background: var(--zk-charcoal); }
.c-nwt[data-zk="badihi-gray"] .c-nwt__x { background: var(--zk-pain); }
.c-nwi[data-zk="badihi-gray"] .c-nwi__q { background: var(--zk-charcoal); border-color: var(--zk-charcoal); box-shadow: none; }
.c-nwi[data-zk="badihi-gray"] .c-nwi__qt { color: #fff; }
/* 155 in badihi: the legend straddles the top border, so it gets the colour of its own box (a tab) and its text never sits half on the grey page (Liav, Session 105) */
.c-cwa[data-zk="badihi-gray"] .c-cwa__box--no .c-cwa__legend { background: var(--zk-charcoal); border-radius: 14px; padding: 4px 20px; }
.c-cwa[data-zk="badihi-gray"] .c-cwa__box--yes .c-cwa__legend { background: var(--zk-btn-b); border-radius: 14px; padding: 4px 20px; }

/* rich-levin: the accent font (Gveret Levin, --zk-font-accent) goes on the accent / key words of every converted section (Liav, Session 105: it was forgotten on all sections after 327) */
[data-zk="rich-levin"] :is(.c-wyg__key, .c-nwi__acc, .c-hre__l2, .c-nwt__acc, .c-hwa__acc, .c-wsk__bold, .c-nwq__acc, .c-fma__key, .c-nxh__acc, .c-cwa__mark, .c-nxb__acc, .c-nxn__acc, .c-nxk__acc, .c-nxk__h3, .c-nwe__acc, .c-cdp__acc, .c-cds__acc, .c-cdf__acc, .c-cdc__acc, .c-cdt__key, .c-cdb__key, .c-cdg__bold, .c-cdh__l2) { font-family: var(--zk-font-accent, inherit); }

/* FOOTER RULE (standing, Liav, Session 106): the footer (127 light c-ft, 128 dark c-fk) ALWAYS paints the background of the section above it, in every theme, so it joins the page. Automatic for every footer that carries data-zk. */
.c-ft[data-zk], .c-fk[data-zk] { background: var(--zk-bg, #fff); }

/* BRAND TEXT GRADIENT (default, Liav, Session 106): token --zk-grad-text is computed per brand and theme by tools/zikit.js (gradText). Use the class zk-gt, or list the selector, on headline and sub headline text that is in the brand colour. Never as a background. */
[data-zk] .zk-gt { background: var(--zk-grad-text, none); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }