/* Zero Lab design tokens — the single source of truth for every V3 screen.
   Values are measured from the approved case-create screen (design-previews/v3-clinic.html,
   1440×900, 2026-09-24) and the brand of the Zero Lab story site. Change a value here, never
   a copy of it in a screen. Names: --zl-<group>-<role>. */

@font-face { font-family: "Manrope"; src: url("assets/fonts/Manrope.ttf") format("truetype"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-058F, U+0600-FB1C, U+FB50-10FFFF; }
@font-face { font-family: "Heebo"; src: url("assets/fonts/Heebo.ttf") format("truetype"); font-weight: 100 900; font-display: swap; }
/* Hebrew letters are always Heebo, also where a screen names Manrope alone (shadow-root folders, older stacks): without this
   the browser fills Hebrew from a system font (Arial, Lucida Grande) and a screen mixes three faces. */
@font-face { font-family: "Manrope"; src: url("assets/fonts/Heebo.ttf") format("truetype"); font-weight: 200 800; font-display: swap; unicode-range: U+0590-05FF, U+FB1D-FB4F; }

:root {
  /* ── Brand (story site) ─────────────────────────────────────────── */
  --zl-brand-graphite: #26312b;   /* logo, headlines on the site */
  --zl-brand-pearl:    #ecede9;   /* site background */
  --zl-brand-white:    #fafbf8;   /* sculptural objects */
  --zl-brand-bone:     #e9e2d3;   /* warm anatomical tone */
  --zl-brand-emerald:  #187449;   /* brand green — never cyan, never washed out */
  --zl-brand-scan:     #2adb91;   /* scanned surfaces only (teeth, crowns) */

  /* ── Surfaces (app): three layers, each a step lighter ──────────── */
  --zl-canvas:        #e6e8e4;                    /* 1 · page behind the shell, sunken wells */
  --zl-surface:       #f3f5ef;                    /* 2 · the shell: one open work surface */
  --zl-card:          #fdfdfb;                    /* 3 · cards and objects */
  --zl-white:         #ffffff;                    /* fields and the active rail button, not a surface */
  --zl-surface-work:  var(--zl-canvas);           /* v1 alias: inner well */
  --zl-surface-ivory: var(--zl-card);             /* v1 alias: card */
  --zl-surface-stage: radial-gradient(at 50% 35%, #f5f8ec, #e2ebd8); /* object stage (scan, 3D) */
  --zl-glass:         rgba(239, 241, 236, .79);   /* sidebar rail */
  --zl-glass-light:   rgba(255, 255, 255, .5);    /* small floating controls */
  --zl-night:         #273e34;                    /* focused dark zone: tray, kit, night folder */
  --zl-night-2:       #1f332a;

  /* ── Conversations (client/ui/chat, owner's reference 2026-09-29) ── */
  --zl-chat-surface:  #ffffff;                    /* the ground every conversation sits on: clean white */
  --zl-chat-them:     #e1eed9;                    /* the other side's bubble: clear light green */
  --zl-chat-me:       #f5ecd9;                    /* my bubble: warm cream */
  --zl-chat-field:    #f2f4f0;                    /* the message box, the day capsule, the channel switch */

  /* ── Object tones (folder, tray) ────────────────────────────────── */
  --zl-folder-tab:     #e3ebd8;
  --zl-folder-top:     #eef3e6;
  --zl-folder-bottom:  #e1e9d5;
  --zl-folder-night-tab: #2a4236;
  --zl-folder-night-top: #2f4a3d;
  --zl-tray-filled-a:  #eef4e4;
  --zl-tray-filled-b:  #d6e5c6;

  /* ── Tooth map (zl-arch) ────────────────────────────────────────── */
  --zl-arch-empty:      var(--zl-white);       /* a tooth with no work */
  --zl-arch-empty-line: var(--zl-line);
  --zl-arch-work:       var(--zl-ink);         /* crown, bridge, implant post */
  --zl-arch-scan:       var(--zl-brand-scan);  /* same marks once the scan is in */
  --zl-arch-scan-line:  #12935f;

  /* Voice orb (owner 2026-09-28: "like Siri"): five light colours that swirl inside the dark glass ball.
     Only the orb uses them — never a screen's text or surface. */
  --zl-voice-1:      #ff48a0;   /* pink */
  --zl-voice-2:      #785aff;   /* violet */
  --zl-voice-3:      #28aaff;   /* sky */
  --zl-voice-4:      #3ce6d2;   /* aqua */
  --zl-voice-5:      #ff965a;   /* warm */
  --zl-voice-core:   #0a0e14;   /* the ball's dark inside */
  --zl-voice-glass:  rgba(255,255,255,.5);
  --zl-voice-rim:    rgba(255,255,255,.3);
  --zl-voice-stage:  #0e1512;   /* the full-screen listening stage */
  --zl-zero-1:       #8fbca4;   /* Zero's orb (ElevenLabs UI orb): the deeper sage */
  --zl-zero-2:       #dcebe0;   /* Zero's orb: the light sage */
  /* Night sky (admin Network, 2026-09-29, v3 "living planets"): deep space with a green nebula, bone stars, the
     status colours bright enough to read at 4.5:1 and up on it. Only the galaxy and its floating glass use them. */
  --zl-sky-deep:     #04080a;   /* space */
  --zl-sky:          #0b1a15;   /* where the nebula is thickest */
  --zl-sky-haze:     #0f4a35;   /* the nebula's green */
  --zl-sky-star:     #e9e2d3;   /* stars, rings and links (bone) */
  --zl-sky-sun:      #f6f1e4;   /* focus rings, the play button */
  --zl-sky-glow:     #e2d2a8;
  --zl-sky-badge:    #2b4038;
  /* Three meanings: working (green), needs attention (amber slowing, red at risk), not started yet (sage signed up and
     ready, blue invited and waiting for approval); paused is plain grey. */
  --zl-sky-working:  #4fdc9b;   /* working and healthy */
  --zl-sky-slow:     #f2b84b;   /* slowing */
  --zl-sky-risk:     #ff6a55;   /* at risk */
  --zl-sky-invited:  #8fb3d9;   /* invited, not on Zero Lab yet */
  --zl-sky-signed:   #a9c79a;   /* signed up */
  --zl-sky-first:    #a9c79a;   /* ready for a first case */
  --zl-sky-waiting:  #8fb3d9;   /* waiting for approval */
  --zl-sky-paused:   #9aa39c;   /* paused */
  --zl-sky-ink:      #f4f6f1;
  --zl-sky-ink-2:    rgba(244, 246, 241, .72);
  --zl-sky-ink-3:    rgba(244, 246, 241, .6);
  --zl-sky-line:     rgba(255, 255, 255, .1);
  --zl-sky-glass:    rgba(14, 22, 20, .62);   /* floating bars and the data card */
  --zl-sky-glass-2:  rgba(255, 255, 255, .06);
  --zl-sky-glass-hi: rgba(255, 255, 255, .14);
  --zl-sky-chip-on:  rgba(79, 220, 155, .17);
  --zl-sky-shadow:   0 10px 30px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .08);
  --zl-sky-bar:      rgba(143, 179, 217, .16);  /* the time machine: everyone on the network that month */
  --zl-sky-bar-hi:   #7ff0bb;                   /* …and those working, lit from the top */
  --zl-sky-bar-lo:   rgba(79, 220, 155, .35);
  /* Review stars (the reputation widgets' gold, ui/reputation.css). */
  --zl-star:         #e0a23a;
  --zl-arch-scan-soft:  #dcfaec;               /* implant ring fill once scanned */
  --zl-arch-missing:    #a9b6a8;               /* dashed outline, no tooth */
  --zl-arch-hover:      #eef6ea;
  --zl-arch-night-line: rgba(255, 255, 255, .34);   /* empty tooth outline on night */
  --zl-arch-gum:        #dfe7d7;               /* close-up: the jaw as one soft silhouette */
  --zl-arch-jaw:        #b3c7ac;               /* close-up: a whole jaw that is the work (model) */
  --zl-arch-jaw-scan:   #9fe8c4;               /* the same once the scan is in */
  --zl-arch-night-gum:  rgba(255, 255, 255, .16);

  /* ── Ink (every text colour ≥ 4.5:1 on canvas, surface and card) ──────────── */
  --zl-ink:        #233b32;   /* primary text, names, numbers */
  --zl-ink-2:      #355640;   /* secondary emphasis, control labels */
  --zl-muted:      #586b60;   /* body secondary · 5.2 on surface, 4.6 on canvas */
  --zl-subtle:     #5f6b58;   /* hints, metadata · 4.6 on canvas, 5.1 on surface */
  --zl-label:      #5f6b58;   /* eyebrow labels (set apart by caps + weight, not by paleness) */
  --zl-on-dark:    #f5f7f1;
  --zl-on-dark-2:  rgba(245, 247, 241, .72);

  /* ── Lines ──────────────────────────────────────────────────────── */
  --zl-line:        #c5d4c4;
  --zl-line-soft:   #e0e8d6;
  --zl-line-white:  rgba(255, 255, 255, .85);  /* glass edge */
  --zl-line-night:  rgba(255, 255, 255, .12);  /* divider on night */
  --zl-line-night-2: rgba(255, 255, 255, .18); /* empty slot on night */

  /* ── Green has one meaning each ─────────────────────────────────────
     action = the brand emerald, the one primary action per context
     selected = a clear action-coloured edge (sage fill stays for chips)
     on track = neutral, because normal should not shout
     scan = scanned surfaces only */
  --zl-action:        var(--zl-brand-emerald);   /* 5.7:1 with white */
  --zl-action-hover:  #125c3a;
  --zl-on-action:     #ffffff;
  --zl-selected-line: var(--zl-brand-emerald);
  --zl-sage:          #dfeccd;   /* selected fill for chips */
  --zl-sage-line:     #a7c594;
  --zl-sage-ink:      #4c684a;
  --zl-focus:         #2f7a52;

  /* ── Status (always paired with a word, never colour alone; ≥ 4.9:1) ─ */
  --zl-ok:      #55655c;  --zl-ok-bg:   #eef1ec;   /* on track: neutral on purpose */
  --zl-warn:    #805c1c;  --zl-warn-bg: #f4ead3;
  --zl-late:    #9a4a36;  --zl-late-bg: #f5e2dc;
  --zl-info:    #3f5f78;  --zl-info-bg: #e2eaf0;
  /* Time to spare before an appointment (owner, stage 3): green is safe, beside warn (tight) and late. */
  --zl-safe:    #1f7a4d;  --zl-safe-bg: #e2f2e8;
  /* Heat (admin desk, stage 3): how strongly a lab or org is wanted — hot > warm > cool. */
  --zl-heat-hot:#a34a1c; --zl-heat-hot-bg:#fbe3d2; --zl-heat-warm:#86621a; --zl-heat-warm-bg:#f6ecd0; --zl-heat-cool:#4d6577; --zl-heat-cool-bg:#e4ebf0;
  /* Charts: 2 series validated with the dataviz palette check on the card (CVD ΔE ≥ 8, normal-vision ΔE ≥ 15). */
  --zl-chart-invoiced: #3f6fb8;
  --zl-chart-collected: var(--zl-brand-emerald);
  --zl-chart-expected: #8fc2a6;
  --zl-chart-open: #d08a2a;   /* what is still owed; with the collected green: CVD ΔE 14, labels always visible */

  /* ── Type ───────────────────────────────────────────────────────── */
  --zl-font:     "Manrope", "Heebo", Arial, sans-serif;
  --zl-font-he:  "Heebo", "Manrope", Arial, sans-serif;
  --zl-font-ar:  "SF Arabic", "Geeza Pro", "Noto Sans Arabic", "Segoe UI", Tahoma, "Manrope", sans-serif;
  --zl-flip: 1;
  --zl-num:      tabular-nums;
  /* size / weight / tracking — one scale for site and app */
  --zl-t-hero-size: clamp(44px, 5.2vw, 76px); --zl-t-hero-weight: 400; --zl-t-hero-track: -.055em;
  --zl-t-display-size: 40px;  --zl-t-display-weight: 300; --zl-t-display-track: -2px;   /* big numbers, 0 % */
  --zl-t-number-size:  32px;  --zl-t-number-weight:  300; --zl-t-number-track:  -1px;   /* stat & stock numbers */
  --zl-t-title-size:   25px;  --zl-t-title-weight:   450; --zl-t-title-track:   -1px;   /* patient, screen title */
  --zl-t-heading-size: 17px;  --zl-t-heading-weight: 550; --zl-t-heading-track: -.2px;  /* section, card title */
  --zl-t-body-size:    14px;  --zl-t-body-weight:    400;                               /* default */
  --zl-t-small-size:   13px;                                                            /* buttons, dense rows */
  --zl-t-caption-size: 12px;                                                            /* metadata */
  --zl-t-micro-size:   11px;                                                            /* units under numbers — the floor */
  --zl-t-eyebrow-size: 11px;  --zl-t-eyebrow-track: .12em; --zl-t-eyebrow-weight: 600;  /* UPPERCASE labels */

  /* ── Space (4-based, 10 is the default gap) ─────────────────────── */
  --zl-sp-1: 2px;  --zl-sp-2: 4px;  --zl-sp-3: 6px;  --zl-sp-4: 8px;
  --zl-sp-5: 10px; --zl-sp-6: 12px; --zl-sp-7: 14px; --zl-sp-8: 16px;
  --zl-sp-10: 20px; --zl-sp-12: 24px; --zl-sp-14: 28px; --zl-sp-16: 32px; --zl-sp-20: 40px;

  /* ── Radius (by object type, not one-size-fits-all) ─────────────── */
  --zl-r-tag:     7px;    /* tooth number, small badge, tooltip */
  --zl-r-field:   10px;   /* search, input */
  --zl-r-control: 14px;   /* buttons, segmented, steps */
  --zl-r-icon:    18px;   /* sidebar and icon buttons */
  --zl-r-card:    20px;   /* cards, floating panels */
  --zl-r-shell:   28px;   /* the shell and the rail */
  --zl-r-pill:    999px;

  /* ── Control heights ────────────────────────────────────────────── */
  /* three heights; everything that shares a row shares a height */
  --zl-h-sm: 32px;  --zl-h-md: 40px;  --zl-h-lg: 48px;
  --zl-h-rail: 46px;   /* rail buttons only — they never share a row */
  --zl-avatar: 38px;

  /* ── Depth ──────────────────────────────────────────────────────── */
  --zl-shadow-1: 0 3px 10px rgba(54, 89, 48, .06);
  --zl-shadow-2: 0 7px 17px rgba(54, 89, 48, .07), 0 14px 45px rgba(54, 89, 48, .03);
  --zl-shadow-3: 0 16px 32px -24px rgba(22, 61, 53, .55), 0 30px 65px -25px rgba(16, 47, 53, .45);
  --zl-shadow-action: 0 5px 12px rgba(53, 91, 69, .12);
  --zl-shadow-object: 0 3px 12px rgba(37, 59, 59, .19);
  --zl-highlight: inset 0 1px 0 rgba(255, 255, 255, .9);
  --zl-shadow-pop: 0 12px 36px rgba(35, 59, 50, .13);   /* menus and popovers */

  /* ── Layout ─────────────────────────────────────────────────────── */
  --zl-rail-w:     72px;   /* one sidebar for every role */
  --zl-rail-inset: 12px;   /* rail distance from the window edge */
  --zl-edge:       14px;   /* top / bottom window margin */
  --zl-header-h:   42px;   /* context header above the shell */
  --zl-context-w:  300px;  /* patient / context column */
  --zl-read-w:     760px;  /* one reading column: chat, notes */

  /* ── Motion ─────────────────────────────────────────────────────── */
  --zl-ease:        cubic-bezier(.22, 1, .36, 1);     /* default: settle softly */
  --zl-ease-spring: cubic-bezier(.34, 1.56, .64, 1);  /* add, drop, confirm */
  --zl-dur-1: 140ms;  /* hover, press */
  --zl-dur-2: 240ms;  /* select, open */
  --zl-dur-3: 480ms;  /* panel, fly-to-tray */
  --zl-dur-4: 900ms;  /* scene, object entrance */
}

@media (prefers-reduced-motion: reduce) {
  :root { --zl-dur-1: 0ms; --zl-dur-2: 0ms; --zl-dur-3: 0ms; --zl-dur-4: 0ms; }
}

/* Language: Hebrew and Arabic get their own type, and --zl-flip turns direction-aware transforms around in RTL. */
:root:lang(he){--zl-font:var(--zl-font-he)}
:root:lang(ar){--zl-font:var(--zl-font-ar)}
:root:lang(he),:root:lang(ar){--zl-flip:-1}
/* Hebrew and Arabic are never tracked: letter-spacing pulls Arabic's joined letters apart and makes Hebrew labels look
   stamped. English eyebrows keep their spacing. */
:root:lang(he) *,:root:lang(ar) *{letter-spacing:normal!important}
/* Back/forward chevrons point the reading way. :root:lang() (not [dir]) so it also reaches inside shadow roots. */
:root:lang(he) .zl-flip-rtl,:root:lang(ar) .zl-flip-rtl{transform:scaleX(-1)}
.zl-lang{display:inline-flex;gap:2px;padding:3px;border-radius:var(--zl-r-pill);background:var(--zl-canvas);border:1px solid var(--zl-line-soft)}
.zl-lang>button{min-width:var(--zl-h-sm);height:calc(var(--zl-h-sm) - 6px);padding:0 var(--zl-sp-4);border:0;border-radius:var(--zl-r-pill);background:none;color:var(--zl-muted);font:inherit;font-size:var(--zl-t-caption-size);font-weight:650;cursor:pointer;transition:background var(--zl-dur-1) var(--zl-ease),color var(--zl-dur-1) var(--zl-ease)}
.zl-lang>button[aria-pressed="true"]{background:var(--zl-card);color:var(--zl-ink);box-shadow:var(--zl-shadow-1)}
.zl-lang>button:focus-visible{outline:2px solid var(--zl-focus);outline-offset:1px}
@media (prefers-reduced-motion:reduce){.zl-lang>button{transition:none}}

/* Case card family — Night is the default; an element carrying data-case-tone (the page root, or a preview such as
   the picker's circles) sets its own tone for everything inside it. */
:root, [data-case-tone="night"] {
  /* ── Case card family (owner 2026-09-29: one card, Night folder): the night body and the stage sheet's three tones ── */
  --zl-case-night:        linear-gradient(145deg, #303a34, #1b2621);
  --zl-case-spine:        linear-gradient(145deg, #667456, #374832);
  --zl-case-ink:          #e6eedd;   /* text on the night body */
  --zl-case-soft:         #c9d8bd;
  --zl-case-muted:        #8fa388;
  --zl-case-glass:        rgba(255, 255, 255, .08);   /* a control on the night body */
  --zl-case-line:         rgba(255, 255, 255, .15);
  --zl-case-shadow:       0 8px 18px rgba(30, 44, 34, .15);
  --zl-sheet-ok:          linear-gradient(145deg, #e0e8c9, #b6c79d);  --zl-sheet-ok-ink:   #405431;
  --zl-sheet-near:        linear-gradient(145deg, #f8f1dc, #e3cf9c);  --zl-sheet-near-ink: #6e5220;
  --zl-sheet-late:        linear-gradient(145deg, #f9ebe4, #e6bdac);  --zl-sheet-late-ink: #7c3a29;
  --zl-sheet-none:        linear-gradient(145deg, #e6ebdc, #cdd6c0);  --zl-sheet-none-ink: #4d5f47;
  --zl-sheet-breath:      rgba(201, 112, 88, .3);
}

/* Case card family, Light tone (owner 2026-09-29): the same folder, row and chip on pale sage paper with dark ink;
   the stage sheet keeps its three colours. Set by CaseCard.jsx setCaseTone on the page root. */
:root[data-case-tone="light"], [data-case-tone="light"] {
  --zl-case-night:  linear-gradient(145deg, #f7f9f2, #e1e9d7);
  --zl-case-spine:  linear-gradient(145deg, #cfdcbf, #a9bd98);
  --zl-case-ink:    #233b32;
  --zl-case-soft:   #355640;
  --zl-case-muted:  #66795f;
  --zl-case-glass:  rgba(255, 255, 255, .7);
  --zl-case-line:   rgba(35, 59, 50, .16);
  --zl-case-shadow: 0 8px 18px rgba(30, 44, 34, .10);
  --zl-case-scan:   brightness(.55) contrast(1.2);   /* the white scan study reads on pale paper */
}

/* Shared onboarding illustration palette, preserved from the merged approved screens.
   Alpha variants reference these opaque tones using color-mix. */
:root {
  --zl-onboarding-green-light-1: #fafcf3;
  --zl-onboarding-green-light-2: #dce8d7;
  --zl-onboarding-green-mid-1: #b7c9ae;
  --zl-onboarding-green-light-3: #f0f6e0;
  --zl-onboarding-green-dark-1: #35562d;
  --zl-onboarding-green-mid-2: #536e55;
  --zl-onboarding-green-mid-3: #718571;
  --zl-onboarding-green-mid-4: #4c694d;
  --zl-onboarding-green-mid-5: #6e826b;
  --zl-onboarding-green-light-4: #f7faec;
  --zl-onboarding-green-dark-2: #244b38;
  --zl-onboarding-green-dark-3: #315b40;
  --zl-onboarding-green-light-5: #f7fcee;
  --zl-onboarding-green-light-6: #d9e9c6;
  --zl-onboarding-green-mid-6: #abc898;
  --zl-onboarding-green-dark-4: #426c32;
  --zl-onboarding-green-mid-7: #74886f;
  --zl-onboarding-green-mid-8: #55735d;
  --zl-onboarding-green-light-7: #e0ebd7;
  --zl-onboarding-green-dark-5: #406244;
  --zl-onboarding-green-mid-9: #c9d9be;
  --zl-onboarding-green-mid-10: #768d77;
  --zl-onboarding-green-mid-11: #638067;
  --zl-onboarding-green-dark-6: #48644e;
  --zl-onboarding-green-mid-12: #b8cbae;
  --zl-onboarding-green-mid-13: #5b7d54;
  --zl-onboarding-green-light-8: #cbdcc3;
  --zl-onboarding-green-dark-7: #3d654a;
  --zl-onboarding-green-mid-14: #627f68;
  --zl-onboarding-green-light-9: #f7f9f0;
  --zl-onboarding-green-dark-8: #33532b;
  --zl-onboarding-green-light-10: #d9e4d4;
  --zl-onboarding-green-light-11: #f6f9f1;
  --zl-onboarding-green-mid-15: #b3c6ac;
  --zl-onboarding-green-mid-16: #8a9d84;
  --zl-onboarding-green-mid-17: #718a70;
  --zl-onboarding-green-mid-18: #8ba382;
  --zl-onboarding-green-light-12: #d4e0cd;
  --zl-onboarding-green-mid-19: #7b8f76;
  --zl-onboarding-green-dark-9: #315f48;
  --zl-onboarding-green-dark-10: #233c2b;
  --zl-onboarding-green-mid-20: #678260;
  --zl-onboarding-green-light-13: #e6f0df;
  --zl-onboarding-green-mid-21: #407849;
  --zl-onboarding-green-mid-22: #718b66;
  --zl-onboarding-green-dark-11: #416b40;
  --zl-onboarding-green-light-14: #e5eedc;
  --zl-onboarding-green-mid-23: #507244;
  --zl-onboarding-green-mid-24: #82a568;
  --zl-onboarding-green-mid-25: #566d5c;
  --zl-onboarding-green-light-15: #f6f9f0;
  --zl-onboarding-green-dark-12: #1d4432;
  --zl-onboarding-green-mid-26: #526b58;
  --zl-onboarding-green-light-16: #dfe6d8;
  --zl-onboarding-green-dark-13: #254a35;
  --zl-onboarding-green-light-17: #f5f8ef;
  --zl-onboarding-green-dark-14: #294e36;
  --zl-onboarding-green-light-18: #f7faf3;
  --zl-onboarding-green-mid-27: #526d59;
  --zl-onboarding-green-dark-15: #193d27;
  --zl-onboarding-green-mid-28: #64a588;
  --zl-onboarding-green-dark-16: #183d32;
  --zl-onboarding-green-light-19: #f9fbf5;
  --zl-onboarding-green-dark-17: #315943;
  --zl-onboarding-green-light-20: #e6eee1;
  --zl-onboarding-green-mid-29: #536d5a;
  --zl-onboarding-green-light-21: #dce7da;
  --zl-onboarding-green-mid-30: #8fa090;
  --zl-onboarding-green-dark-18: #168858;
  --zl-onboarding-green-dark-19: #2d513c;
  --zl-onboarding-green-light-22: #eff5e8;
  --zl-onboarding-green-dark-20: #244435;
  --zl-onboarding-green-light-23: #f8faf5;
  --zl-onboarding-green-dark-21: #24533b;
  --zl-onboarding-green-light-24: #eef3e8;
  --zl-onboarding-green-dark-22: #15382c;
  --zl-onboarding-green-dark-23: #294a39;
  --zl-onboarding-green-mid-31: #617466;
  --zl-onboarding-green-mid-32: #526659;
  --zl-onboarding-green-light-25: #dbe4da;
  --zl-onboarding-green-dark-24: #173829;
  --zl-onboarding-neutral-mid-1: #89998a;
  --zl-onboarding-green-dark-25: #158354;
  --zl-onboarding-green-dark-26: #345e48;
  --zl-onboarding-green-dark-27: #254a38;
  --zl-onboarding-green-dark-28: #274734;
  --zl-onboarding-green-dark-29: #284e3c;
  --zl-onboarding-green-light-26: #f4f7ed;
  --zl-onboarding-green-light-27: #f5f7f0;
  --zl-onboarding-green-light-28: #fafbf7;
  --zl-onboarding-green-light-29: #dce5d7;
  --zl-onboarding-green-dark-30: #293c32;
  --zl-onboarding-green-mid-33: #637568;
  --zl-onboarding-green-light-30: #e6eee0;
  --zl-onboarding-green-light-31: #fafcf8;
  --zl-onboarding-green-mid-34: #6f9678;
  --zl-onboarding-green-mid-35: #b4c7ae;
  --zl-onboarding-green-light-32: #f2f6ed;
  --zl-onboarding-green-mid-36: #729769;
  --zl-onboarding-green-light-33: #edf3e5;
  --zl-onboarding-green-light-34: #f8faf3;
  --zl-onboarding-green-mid-37: #aac2a7;
  --zl-onboarding-green-light-35: #f0f5e9;
  --zl-onboarding-green-light-36: #e8f0e1;
  --zl-onboarding-green-mid-38: #819f76;
  --zl-onboarding-green-light-37: #edf3e7;
  --zl-onboarding-green-light-38: #d7e5cc;
  --zl-onboarding-green-mid-39: #799d6d;
  --zl-onboarding-green-light-39: #e3edda;
  --zl-onboarding-green-dark-31: #203528;
  --zl-onboarding-green-light-40: #eaf0e5;
  --zl-onboarding-green-light-41: #f3f6ed;
  --zl-onboarding-green-light-42: #e1e8dc;
  --zl-onboarding-green-mid-40: #c8d9b5;
  --zl-onboarding-green-light-43: #eff3e7;
  --zl-onboarding-green-light-44: #e1e8db;
  --zl-onboarding-neutral-dark-1: #000000;
  --zl-onboarding-green-light-45: #ecf3e7;
  --zl-onboarding-green-dark-32: #365930;
  --zl-onboarding-green-dark-33: #294c34;
  --zl-onboarding-green-mid-41: #657c61;
  --zl-onboarding-green-dark-34: #244e38;
  --zl-onboarding-green-light-46: #f1f4eb;
  --zl-onboarding-neutral-mid-2: #65766d;
  --zl-onboarding-green-light-47: #edf1e7;
  --zl-onboarding-green-dark-35: #284a39;
  --zl-onboarding-green-light-48: #e7ede4;
  --zl-onboarding-green-dark-36: #244836;
  --zl-onboarding-green-mid-42: #4d6852;
  --zl-onboarding-green-mid-43: #6c806c;
  --zl-onboarding-green-dark-37: #426548;
  --zl-onboarding-green-mid-44: #6c846c;
  --zl-onboarding-green-mid-45: #627c63;
  --zl-onboarding-green-light-49: #f3f7ea;
  --zl-onboarding-green-dark-38: #325f37;
  --zl-onboarding-green-dark-39: #2e5a3d;
  --zl-onboarding-green-mid-46: #758d73;
  --zl-onboarding-green-mid-47: #c1d3b7;
  --zl-onboarding-green-light-50: #f7faef;
  --zl-onboarding-green-dark-40: #355d3e;
  --zl-onboarding-green-mid-48: #b9caae;
  --zl-onboarding-green-mid-49: #546e50;
  --zl-onboarding-green-light-51: #e8eee0;
  --zl-onboarding-green-light-52: #d9e5d3;
  --zl-onboarding-green-mid-50: #506a58;
  --zl-onboarding-green-mid-51: #879b8e;
  --zl-onboarding-green-mid-52: #16a166;
  --zl-onboarding-green-mid-53: #607763;
  --zl-onboarding-green-light-53: #f5f6ef;
  --zl-onboarding-green-dark-41: #183b30;
  --zl-onboarding-green-dark-42: #244d3b;
  --zl-onboarding-green-dark-43: #315640;
  --zl-onboarding-green-dark-44: #234f3d;
  --zl-onboarding-green-mid-54: #506953;
  --zl-onboarding-green-mid-55: #728571;
  --zl-onboarding-green-light-54: #eff3e4;
  --zl-onboarding-green-light-55: #f9fbf2;
  --zl-onboarding-green-dark-45: #274d39;
  --zl-onboarding-green-dark-46: #46624d;
  --zl-onboarding-green-mid-56: #516952;
  --zl-onboarding-green-mid-57: #6f836d;
  --zl-onboarding-green-dark-47: #34523a;
  --zl-onboarding-green-light-56: #e7eedf;
  --zl-onboarding-blue-dark-1: #172b35;
  --zl-onboarding-blue-mid-1: #566873;
  --zl-onboarding-blue-light-1: #dce4e7;
  --zl-onboarding-blue-light-2: #f3f6f7;
  --zl-onboarding-blue-dark-2: #176d71;
  --zl-onboarding-blue-light-3: #f4f6f7;
  --zl-onboarding-blue-dark-3: #465961;
  --zl-onboarding-blue-mid-2: #526773;
  --zl-onboarding-blue-light-4: #eef4f5;
  --zl-onboarding-blue-dark-4: #405660;
  --zl-onboarding-blue-dark-5: #21323c;
  --zl-onboarding-blue-light-5: #c7d1d6;
  --zl-onboarding-blue-mid-3: #53666f;
  --zl-onboarding-blue-dark-6: #193c68;
  --zl-onboarding-blue-mid-4: #637680;
  --zl-onboarding-blue-mid-5: #60707c;
  --zl-onboarding-green-light-57: #eff9f7;
  --zl-onboarding-blue-mid-6: #afbdc4;
  --zl-onboarding-warm-light-1: #f8f2e7;
  --zl-onboarding-warm-dark-1: #715624;
  --zl-onboarding-blue-mid-7: #287eaa;
  --zl-onboarding-neutral-dark-2: #242424;
  --zl-onboarding-blue-dark-7: #181321;
  --zl-onboarding-green-dark-48: #29322f;
  --zl-onboarding-warm-light-2: #ecece8;
  --zl-onboarding-neutral-mid-3: #718076;
  --zl-onboarding-green-light-58: #dce2d9;
  --zl-onboarding-green-light-59: #d9dfd6;
  --zl-onboarding-green-light-60: #e4ebe1;
  --zl-onboarding-green-light-61: #e4e8e1;
  --zl-onboarding-green-dark-49: #244b37;
  --zl-onboarding-green-light-62: #f7f8f5;
  --zl-onboarding-green-light-63: #e5e8e1;
  --zl-onboarding-green-mid-58: #b9c7b8;
  --zl-onboarding-green-light-64: #e9ece4;
  --zl-onboarding-green-light-65: #dfe5dc;
  --zl-onboarding-green-mid-59: #9aad98;
  --zl-onboarding-green-light-66: #edf2e9;
  --zl-onboarding-green-mid-60: #7f997c;
  --zl-onboarding-green-dark-50: #376b4c;
  --zl-onboarding-green-light-67: #e3e9df;
  --zl-onboarding-green-dark-51: #192b21;
  --zl-onboarding-green-light-68: #e0e5dc;
  --zl-onboarding-green-mid-61: #b5c5b2;
  --zl-onboarding-green-light-69: #f7f9f4;
  --zl-onboarding-neutral-mid-4: #647367;
  --zl-onboarding-warm-light-3: #f4f0e5;
  --zl-onboarding-warm-mid-1: #81704c;
  --zl-onboarding-warm-light-4: #ded5bd;
  --zl-onboarding-green-light-70: #f0f4ed;
  --zl-onboarding-green-light-71: #dfe6da;
  --zl-onboarding-green-light-72: #dce4db;
  --zl-onboarding-green-light-73: #f9fbf8;
  --zl-onboarding-green-dark-52: #25794e;
  --zl-onboarding-neutral-mid-5: #69776d;
  --zl-onboarding-green-light-74: #e9ede6;
  --zl-onboarding-green-light-75: #edf1e8;
  --zl-onboarding-neutral-mid-6: #6e7e70;
  --zl-onboarding-green-light-76: #dcf7cf;
  --zl-onboarding-green-dark-53: #267449;
  --zl-onboarding-green-dark-54: #27372b;
  --zl-onboarding-blue-dark-8: #276b8a;
  --zl-onboarding-neutral-mid-7: #72816f;
  --zl-onboarding-blue-mid-8: #42a9ce;
  --zl-onboarding-green-light-77: #fafcf7;
  --zl-onboarding-neutral-mid-8: #68776b;
  --zl-onboarding-green-light-78: #dae3d5;
  --zl-onboarding-green-light-79: #f0f4ec;
  --zl-onboarding-neutral-mid-9: #748370;
  --zl-onboarding-green-light-80: #dfebd8;
  --zl-onboarding-blue-dark-9: #075e54;
  --zl-onboarding-green-light-81: #d4e8df;
  --zl-onboarding-green-light-82: #dce6e0;
  --zl-onboarding-green-dark-55: #376b58;
  --zl-onboarding-warm-light-5: #efeae2;
  --zl-onboarding-neutral-mid-10: #627065;
  --zl-onboarding-neutral-mid-11: #869089;
  --zl-onboarding-neutral-mid-12: #89918c;
  --zl-onboarding-green-dark-56: #008069;
  --zl-onboarding-green-light-83: #e8f0e2;
  --zl-onboarding-green-mid-62: #acc0a3;
  --zl-onboarding-green-light-84: #edf2e8;
  --zl-onboarding-green-light-85: #f2f5ee;
  --zl-onboarding-green-light-86: #edf3e8;
  --zl-onboarding-green-light-87: #e1e7dc;
  --zl-onboarding-green-mid-63: #b4c5af;
  --zl-onboarding-green-light-88: #f3f6ef;
  --zl-onboarding-neutral-mid-13: #778274;
  --zl-onboarding-green-mid-64: #b8c4b3;
  --zl-onboarding-green-light-89: #f8faf6;
  --zl-onboarding-green-light-90: #e6ece3;
  --zl-onboarding-neutral-mid-14: #748075;
  --zl-onboarding-neutral-mid-15: #879386;
  --zl-onboarding-green-light-91: #eaf2e5;
  --zl-onboarding-neutral-mid-16: #97a090;
  --zl-onboarding-green-light-92: #f0f5eb;
  --zl-onboarding-green-light-93: #e0e8d9;
  --zl-onboarding-green-light-94: #dfead8;
  --zl-onboarding-green-light-95: #dce3d9;
  --zl-onboarding-green-light-96: #e0e6dd;
  --zl-onboarding-green-light-97: #c9d6c9;
  --zl-onboarding-green-light-98: #e4eadf;
  --zl-onboarding-green-mid-65: #bacdbb;
  --zl-onboarding-green-light-99: #e1eadf;
  --zl-onboarding-green-mid-66: #54896b;
  --zl-onboarding-warm-mid-2: #8b7554;
  --zl-onboarding-warm-mid-3: #b89c6c;
  --zl-onboarding-green-light-100: #f1f5ed;
  --zl-onboarding-green-mid-67: #65796d;
  --zl-onboarding-green-light-101: #e8eee5;
  --zl-onboarding-green-light-102: #f5f9ec;
  --zl-onboarding-green-light-103: #d2dfcc;
  --zl-onboarding-green-mid-68: #93b695;
  --zl-onboarding-green-mid-69: #637c6a;
  --zl-onboarding-green-dark-57: #426e52;
  --zl-onboarding-green-dark-58: #244c38;
  --zl-onboarding-green-light-104: #f9fcf5;
  --zl-onboarding-green-dark-59: #274c39;
  --zl-onboarding-green-dark-60: #375643;
  --zl-onboarding-green-light-105: #d0dacf;
  --zl-onboarding-green-light-106: #eff4ec;
  --zl-onboarding-green-light-107: #e5eddf;
  --zl-onboarding-green-dark-61: #214b39;
  --zl-onboarding-green-dark-62: #234b38;
  --zl-onboarding-green-light-108: #dce8de;
  --zl-onboarding-green-light-109: #f0f4eb;
  --zl-onboarding-green-dark-63: #376749;
  --zl-onboarding-green-light-110: #e5eee0;
  --zl-onboarding-green-mid-70: #57705e;
  --zl-onboarding-green-light-111: #cddccc;
  --zl-onboarding-green-light-112: #edf5e4;
  --zl-onboarding-green-dark-64: #2c573e;
  --zl-onboarding-green-light-113: #f9fcf1;
  --zl-onboarding-green-light-114: #f5faee;
  --zl-onboarding-green-light-115: #dceccf;
  --zl-onboarding-green-mid-71: #a8c697;
  --zl-onboarding-green-light-116: #f1f5eb;
  --zl-onboarding-green-light-117: #e2eadd;
  --zl-onboarding-green-light-118: #dce4d7;
  --zl-onboarding-green-mid-72: #536452;
  --zl-onboarding-green-mid-73: #586954;
  --zl-onboarding-green-dark-65: #2e4e39;
  --zl-onboarding-green-mid-74: #536652;
  --zl-onboarding-green-light-119: #e5efde;
  --zl-onboarding-green-light-120: #cfdfc5;
  --zl-onboarding-green-light-121: #e0e8da;
  --zl-onboarding-green-mid-75: #596c54;
  --zl-onboarding-green-dark-66: #416641;
  --zl-onboarding-green-light-122: #e6efde;
  --zl-onboarding-green-mid-76: #526a51;
  --zl-onboarding-green-mid-77: #63725c;
  --zl-onboarding-green-dark-67: #35553d;
  --zl-onboarding-green-mid-78: #64745d;
  --zl-onboarding-green-mid-79: #73ae91;
  --zl-onboarding-green-dark-68: #397259;
  --zl-onboarding-green-dark-69: #224d3c;
  --zl-onboarding-green-dark-70: #214a3a;
  --zl-onboarding-green-light-123: #e1eee4;
  --zl-onboarding-green-dark-71: #496651;
  --zl-onboarding-green-dark-72: #395b46;
  --zl-onboarding-green-mid-80: #607563;
  --zl-onboarding-neutral-mid-17: #98a79c;
  --zl-onboarding-green-mid-81: #1c9862;
  --zl-onboarding-green-dark-73: #42634e;
  --zl-onboarding-green-light-124: #e4eddf;
  --zl-onboarding-green-light-125: #dae2d7;
  --zl-onboarding-warm-mid-4: #a34f48;
  --zl-onboarding-green-light-126: #cedbc8;
  --zl-onboarding-green-light-127: #f1f5ec;
  --zl-onboarding-green-mid-82: #617868;
  --zl-onboarding-green-light-128: #d8e2d3;
  --zl-onboarding-green-light-129: #e9eee7;
  --zl-onboarding-green-mid-83: #5b7460;
  --zl-onboarding-green-mid-84: #66806b;
  --zl-onboarding-green-light-130: #e0eedb;
  --zl-onboarding-green-dark-74: #3c7249;
  --zl-onboarding-green-mid-85: #56715d;
  --zl-onboarding-green-mid-86: #617a65;
  --zl-onboarding-green-mid-87: #688071;
  --zl-onboarding-green-mid-88: #6b8071;
  --zl-onboarding-green-mid-89: #52755d;
  --zl-onboarding-green-mid-90: #718774;
  --zl-onboarding-neutral-mid-18: #93a193;
  --zl-onboarding-green-mid-91: #91b397;
  --zl-onboarding-green-mid-92: #7fbd96;
  --zl-onboarding-green-dark-75: #325d42;
  --zl-onboarding-green-mid-93: #aec49b;
  --zl-onboarding-green-mid-94: #6b8370;
  --zl-onboarding-green-light-131: #cddcca;
  --zl-onboarding-green-mid-95: #6b8170;
  --zl-onboarding-green-mid-96: #adbf9e;
  --zl-onboarding-green-light-132: #f5faef;
  --zl-onboarding-green-light-133: #cee1bb;
  --zl-onboarding-green-mid-97: #7d9f65;
  --zl-onboarding-green-dark-76: #163c25;
  --zl-onboarding-green-mid-98: #7a8e7d;
  --zl-onboarding-green-light-134: #eff4e9;
  --zl-onboarding-green-light-135: #edf4e5;
  --zl-onboarding-green-light-136: #dfead5;
  --zl-onboarding-green-mid-99: #73866b;
  --zl-onboarding-green-light-137: #e4eedb;
  --zl-onboarding-green-light-138: #f3f5ee;
  --zl-onboarding-green-mid-100: #74836b;
  --zl-onboarding-green-light-139: #dfe7d8;
  --zl-onboarding-green-light-140: #e6eedf;
  --zl-onboarding-blue-mid-9: #536772;
  --zl-onboarding-blue-dark-10: #203d47;
  --zl-onboarding-blue-mid-10: #75858b;
  --zl-onboarding-blue-mid-11: #78878c;
  --zl-onboarding-blue-mid-12: #63767d;
  --zl-onboarding-blue-mid-13: #a1b7be;
  --zl-onboarding-blue-dark-11: #315b66;
  --zl-onboarding-blue-dark-12: #24797e;
  --zl-onboarding-blue-mid-14: #526c73;
  --zl-onboarding-blue-light-6: #eaf1f2;
  --zl-onboarding-blue-dark-13: #33545e;
  --zl-onboarding-green-light-141: #e6efea;
  --zl-onboarding-green-dark-77: #306c57;
  --zl-onboarding-blue-mid-15: #6b7e86;
  --zl-onboarding-blue-light-7: #e6edef;
  --zl-onboarding-blue-mid-16: #81949a;
  --zl-onboarding-blue-mid-17: #72868b;
  --zl-onboarding-blue-light-8: #e6ecee;
  --zl-onboarding-green-mid-101: #577c6f;
  --zl-onboarding-green-light-142: #edf4f1;
  --zl-onboarding-green-dark-78: #315e4e;
  --zl-onboarding-green-light-143: #e8efec;
  --zl-onboarding-green-dark-79: #39604e;
  --zl-onboarding-blue-light-9: #edf0f7;
  --zl-onboarding-blue-mid-18: #67728d;
  --zl-onboarding-blue-mid-19: #aabdc2;
  --zl-onboarding-blue-light-10: #f9fbfb;
  --zl-onboarding-blue-dark-14: #345c65;
  --zl-onboarding-blue-light-11: #f5f8f8;
  --zl-onboarding-blue-mid-20: #657981;
  --zl-onboarding-blue-dark-15: #415c65;
  --zl-onboarding-blue-light-12: #dbe5e7;
  --zl-onboarding-blue-mid-21: #49747a;
  --zl-onboarding-blue-mid-22: #647880;
  --zl-onboarding-green-dark-80: #347b71;
  --zl-onboarding-green-light-144: #edf6f2;
  --zl-onboarding-blue-mid-23: #479ba7;
  --zl-onboarding-blue-light-13: #edf3f4;
  --zl-onboarding-blue-mid-24: #607983;
  --zl-onboarding-green-mid-102: #487367;
  --zl-onboarding-blue-dark-16: #345158;
  --zl-onboarding-green-light-145: #dae9e2;
  --zl-onboarding-blue-light-14: #d3e0e2;
  --zl-onboarding-green-mid-103: #37866c;
  --zl-onboarding-blue-mid-25: #6b7f87;
  --zl-onboarding-blue-mid-26: #66808b;
  --zl-onboarding-blue-light-15: #dfe9eb;
  --zl-onboarding-blue-mid-27: #47636f;
  --zl-onboarding-green-light-146: #e1f0e5;
  --zl-onboarding-green-mid-104: #607e70;
  --zl-onboarding-blue-mid-28: #6b7d86;
  --zl-onboarding-green-light-147: #f5f8f7;
  --zl-onboarding-blue-mid-29: #438ba4;
  --zl-onboarding-blue-dark-17: #233b44;
  --zl-onboarding-blue-light-16: #f4f5f6;
  --zl-onboarding-neutral-mid-19: #6c7178;
  --zl-onboarding-blue-dark-18: #17202c;
  --zl-onboarding-blue-light-17: #e7e9ec;
  --zl-onboarding-blue-dark-19: #242a32;
  --zl-onboarding-neutral-mid-20: #777d85;
  --zl-onboarding-blue-dark-20: #4a515a;
  --zl-onboarding-blue-light-18: #fafbfc;
  --zl-onboarding-blue-light-19: #e1e4e8;
  --zl-onboarding-blue-dark-21: #29313b;
  --zl-onboarding-blue-mid-30: #8a9cae;
  --zl-onboarding-blue-mid-31: #8299b5;
  --zl-onboarding-neutral-mid-21: #9399a0;
  --zl-onboarding-neutral-mid-22: #8a9097;
  --zl-onboarding-blue-mid-32: #535f6e;
  --zl-onboarding-blue-dark-22: #263c43;
  --zl-onboarding-blue-dark-23: #0d1d25;
  --zl-onboarding-blue-light-20: #e0e5e7;
  --zl-onboarding-blue-light-21: #d9e2e6;
  --zl-onboarding-blue-light-22: #edf0f2;
  --zl-onboarding-blue-dark-24: #27313e;
  --zl-onboarding-green-light-148: #dae4de;
  --zl-onboarding-green-dark-81: #142a22;
  --zl-onboarding-green-light-149: #e0e9e3;
  --zl-onboarding-green-light-150: #e3eae6;
  --zl-onboarding-neutral-mid-23: #6a7b73;
  --zl-onboarding-green-mid-105: #52685b;
  --zl-onboarding-neutral-mid-24: #7b887f;
  --zl-onboarding-green-dark-82: #263c31;
  --zl-onboarding-blue-dark-25: #172e32;
  --zl-onboarding-green-dark-83: #13281e;
  --zl-onboarding-green-mid-106: #65776c;
  --zl-onboarding-neutral-mid-25: #748278;
  --zl-onboarding-green-light-151: #f0f3f0;
  --zl-onboarding-green-dark-84: #225b40;
  --zl-onboarding-green-light-152: #f3f6f3;
  --zl-onboarding-green-mid-107: #61736a;
  --zl-onboarding-green-light-153: #eef3ef;
  --zl-onboarding-neutral-mid-26: #708076;
  --zl-onboarding-green-light-154: #e2e9e3;
  --zl-onboarding-green-dark-85: #277555;
  --zl-onboarding-green-light-155: #f5f7f5;
  --zl-onboarding-green-light-156: #e3e9e4;
  --zl-onboarding-green-mid-108: #617469;
  --zl-onboarding-green-light-157: #dae3dd;
  --zl-onboarding-green-dark-86: #294337;
  --zl-onboarding-green-light-158: #f1f5f2;
  --zl-onboarding-neutral-mid-27: #65766c;
  --zl-onboarding-green-light-159: #f0f5f1;
  --zl-onboarding-neutral-mid-28: #758479;
  --zl-onboarding-neutral-light-1: #f4f5f4;
  --zl-onboarding-green-light-160: #f7f9f7;
  --zl-onboarding-neutral-mid-29: #708077;
  --zl-onboarding-green-dark-87: #1b3620;
  --zl-onboarding-green-light-161: #dce4df;
  --zl-onboarding-green-light-162: #fcfdfc;
  --zl-onboarding-neutral-mid-30: #6e7d74;
  --zl-onboarding-neutral-mid-31: #77857c;
  --zl-onboarding-green-light-163: #edf0ed;
  --zl-onboarding-green-light-164: #edf5ee;
  --zl-onboarding-green-dark-88: #306342;
  --zl-onboarding-green-light-165: #dee7e0;
  --zl-onboarding-green-light-166: #dbe1db;
  --zl-onboarding-green-light-167: #e4e7e2;
  --zl-onboarding-green-mid-109: #9cac9f;
  --zl-onboarding-green-light-168: #fafbf9;
  --zl-onboarding-green-light-169: #f5f7f3;
  --zl-onboarding-green-light-170: #e1e7df;
  --zl-onboarding-green-light-171: #dde5dc;
  --zl-onboarding-green-light-172: #d9e3d2;
  --zl-onboarding-green-mid-110: #799a72;
  --zl-onboarding-green-dark-89: #203728;
  --zl-onboarding-green-mid-111: #789c6d;
  --zl-onboarding-green-mid-112: #bacfb2;
  --zl-onboarding-green-light-173: #dfe7d9;
  --zl-onboarding-green-light-174: #e1ead8;
  --zl-onboarding-green-light-175: #e3eddb;
  --zl-onboarding-green-dark-90: #2d4d37;
  --zl-onboarding-green-mid-113: #65947c;
  --zl-onboarding-green-dark-91: #263c2e;
  --zl-onboarding-warm-mid-5: #943e3e;
  --zl-onboarding-green-light-176: #d8dfdc;
  --zl-onboarding-green-light-177: #edf3ed;
  --zl-onboarding-neutral-mid-32: #67726d;
}

/* Workspace material: frosted glass derived only from the existing brand palette, shared by the board and case.
   Colour belongs to status and clinical content; the surface is translucent. */
:root {
 --zl-frost-ground: var(--zl-canvas);
 --zl-frost-shade: color-mix(in srgb,var(--zl-brand-graphite) 12%,var(--zl-canvas));
 --zl-frost-sage: color-mix(in srgb,var(--zl-sage-line) 30%,var(--zl-canvas));
 --zl-frost-light: var(--zl-brand-white);
 --zl-frost-edge: color-mix(in srgb,var(--zl-white) 68%,transparent);
 --zl-frost-line: color-mix(in srgb,var(--zl-ink) 10%,transparent);
 --zl-frost-pane: color-mix(in srgb,var(--zl-surface) 42%,transparent);
 --zl-frost-card: color-mix(in srgb,var(--zl-card) 57%,transparent);
 --zl-frost-control: color-mix(in srgb,var(--zl-white) 42%,transparent);
 --zl-frost-shadow: 0 22px 60px -24px color-mix(in srgb,var(--zl-brand-graphite) 25%,transparent), 0 4px 12px -5px color-mix(in srgb,var(--zl-brand-graphite) 8%,transparent), inset 0 1px 0 color-mix(in srgb,var(--zl-white) 84%,transparent);
 --zl-frost-card-shadow: 0 8px 24px -12px color-mix(in srgb,var(--zl-brand-graphite) 22%,transparent), inset 0 1px 0 color-mix(in srgb,var(--zl-white) 90%,transparent);
 --zl-frost-filter: blur(28px) saturate(100%);
 --zl-frost-ground-image: radial-gradient(ellipse at 3% 8%,var(--zl-frost-light),transparent 56%),radial-gradient(ellipse at 95% 25%,var(--zl-frost-shade),transparent 62%),radial-gradient(ellipse at 20% 100%,var(--zl-frost-sage),transparent 65%);
 --zl-frost-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' opacity='.035' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");
}