/* =====================================================================
   Zappelix – Design-Tokens
   „futuristisch, aber kinderfroh“
   ---------------------------------------------------------------------
   Schriften – SELBST GEHOSTET (DSGVO: keine Anfragen an Google-Server):
   - Überschriften: "Baloo 2" 500/600/700/800 (rund, verspielt)
   - Fließtext:     "Nunito"  400/600/700/800 + 400 kursiv (rund, gut lesbar)
   Dateien: woff2, Teilmengen latin + latin-ext (Quelle: Fontsource),
   Lizenz: SIL Open Font License 1.1 (OFL-Baloo2.txt, OFL-Nunito.txt im Font-Ordner).
   Pfad: site/fonts/ (relativ zu css/tokens.css: ../fonts/…)
   Tipp: Die zwei wichtigsten Schnitte vorladen, z. B.
   <link rel="preload" href="fonts/nunito-latin-400-normal.woff2" as="font" type="font/woff2" crossorigin>
   <link rel="preload" href="fonts/baloo-2-latin-800-normal.woff2" as="font" type="font/woff2" crossorigin>
   ===================================================================== */

/* Baloo 2 */
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Baloo 2";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/baloo-2-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Nunito */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/nunito-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/nunito-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-800-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/nunito-latin-800-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext-400-italic.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/nunito-latin-400-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* -------------------------------------------------------------------
     1. FARBEN – Grundpalette
     ------------------------------------------------------------------- */
  /* Violett (Markenfarbe) */
  --zx-violet-100: #ede9fe;
  --zx-violet-200: #ddd6fe;
  --zx-violet-300: #c4b5fd;
  --zx-violet-400: #a78bfa;
  --zx-violet-500: #8b5cf6;
  --zx-violet-600: #7c3aed;
  --zx-violet-700: #6d28d9;
  --zx-violet-900: #4c1d95;
  --zx-violet-950: #2e1065;
  /* Cyan / Türkis (Technik, „KI-Leuchten“) */
  --zx-cyan-200: #a5f3fc;
  --zx-cyan-400: #22d3ee;
  --zx-teal-300: #5eead4;
  --zx-teal-700: #0f766e;   /* textfähig: 5,47:1 auf Weiß */
  /* Bernstein / Gelb (Funkeln, Sterne) */
  --zx-amber-300: #fcd34d;
  --zx-amber-400: #fbbf24;
  --zx-amber-500: #f59e0b;
  --zx-amber-800: #92400e;  /* textfähig: 7,09:1 auf Weiß · 6,37:1 auf #fef3c7 */
  /* Koralle / Pink (Wärme, Fell-Ohren) */
  --zx-coral-400: #fb7185;
  --zx-pink-400: #f472b6;
  --zx-pink-700: #be185d;   /* textfähig: 6,04:1 auf Weiß */
  --zx-peach-300: #fdba74;

  /* -------------------------------------------------------------------
     2. FARBEN – Rollen (diese im Code verwenden!)
     Kontrast nach WCAG 2.1 (geprüft per Skript, Text auf --zx-bg #faf7ff
     bzw. --zx-surface #ffffff):
     ------------------------------------------------------------------- */
  --zx-primary: var(--zx-violet-600);      /* #7c3aed – Text 5,38:1 auf bg / 5,70:1 auf Weiß (AA) */
  --zx-primary-strong: var(--zx-violet-700);/* #6d28d9 – Hover, 6,70:1 auf bg (AA) */
  --zx-primary-soft: var(--zx-violet-100); /* #ede9fe – Flächen, Chips */
  --zx-secondary: var(--zx-cyan-400);      /* #22d3ee – NUR Flächen/Deko, nicht als Text auf Hell */
  --zx-secondary-soft: #cffafe;
  --zx-accent: var(--zx-amber-400);        /* #fbbf24 – Sterne, Highlights; dunkler Text darauf 9,13:1 */
  --zx-accent-soft: #fef3c7;
  --zx-warm: var(--zx-coral-400);          /* #fb7185 – Deko */
  --zx-warm-soft: #ffe4e6;

  --zx-bg: #faf7ff;                        /* zarter Lavendel-Hintergrund */
  --zx-bg-alt: #f3eeff;                    /* Abschnitts-Wechsel */
  --zx-surface: #ffffff;                   /* Karten, Formulare */
  --zx-surface-glass: rgba(255, 255, 255, .66); /* Glas-Effekt (mit backdrop-filter) */
  --zx-border: #e4dcfb;                    /* dezente Ränder (dekorativ) */
  --zx-border-strong: #8f7cc4;             /* Formularfelder: 3,59:1 auf Weiß (≥ 3:1 für UI) */

  --zx-text: #3b1a78;                      /* Fließtext: 12,35:1 auf bg · 13,08:1 auf Weiß (AAA) */
  --zx-text-strong: var(--zx-violet-950);  /* #2e1065 Überschriften: 14,38:1 auf bg (AAA) */
  --zx-text-muted: #655589;                /* Nebentext: 6,16:1 auf bg · 5,75:1 auf bg-alt (AA) */
  --zx-text-on-primary: #ffffff;           /* Weiß auf #7c3aed: 5,70:1 (AA) */
  --zx-text-on-accent: var(--zx-violet-950);/* auf Gelb/Cyan: 9,13:1 / 8,43:1 */

  --zx-success: #15803d;                   /* 4,73:1 auf bg · 5,02:1 auf Weiß (AA) */
  --zx-success-soft: #dcfce7;
  --zx-warn: #b45309;                      /* 4,74:1 auf bg · 5,02:1 auf Weiß (AA) */
  --zx-warn-soft: #fef3c7;
  --zx-error: #be123c;                     /* 5,93:1 auf bg · 6,29:1 auf Weiß (AA) */
  --zx-error-soft: #ffe4e6;

  --zx-focus: var(--zx-violet-600);        /* Fokusring 5,38:1 gegen bg (≥ 3:1) */

  /* Verläufe */
  --zx-grad-brand: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 100%);
  --zx-grad-mascot: linear-gradient(135deg, #ddd6fe 0%, #a78bfa 50%, #5eead4 100%);
  --zx-grad-warm: linear-gradient(135deg, #fbbf24 0%, #fb7185 55%, #f472b6 100%);
  --zx-grad-belly: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
  --zx-grad-button: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%); /* Weiß darauf ≥ 5,7:1 */
  --zx-grad-sky: radial-gradient(1200px 600px at 10% -10%, #ede9fe 0%, transparent 60%),
                 radial-gradient(900px 500px at 100% 0%, #cffafe 0%, transparent 55%),
                 radial-gradient(800px 500px at 50% 110%, #ffe4e6 0%, transparent 60%),
                 #faf7ff;
  --zx-grad-neon: linear-gradient(90deg, #a78bfa, #22d3ee, #fbbf24, #f472b6);

  /* -------------------------------------------------------------------
     3. SCHRIFTEN
     ------------------------------------------------------------------- */
  --zx-font-heading: "Baloo 2", "Fredoka", ui-rounded, "Nunito", system-ui, sans-serif;
  --zx-font-body: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --zx-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fließende Schriftgrößen (360 px → 1280 px Viewport) */
  --zx-text-xs:  clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --zx-text-sm:  clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
  --zx-text-base: clamp(1rem, 0.96rem + 0.20vw, 1.0625rem);  /* Fließtext ≥ 16 px */
  --zx-text-lg:  clamp(1.125rem, 1.07rem + 0.30vw, 1.25rem);
  --zx-text-xl:  clamp(1.3rem, 1.2rem + 0.50vw, 1.55rem);
  --zx-text-2xl: clamp(1.6rem, 1.42rem + 0.85vw, 2.1rem);
  --zx-text-3xl: clamp(2rem, 1.70rem + 1.40vw, 2.85rem);
  --zx-text-4xl: clamp(2.5rem, 2.05rem + 2.20vw, 3.9rem);

  --zx-weight-regular: 400;
  --zx-weight-semibold: 600;
  --zx-weight-bold: 700;
  --zx-weight-extrabold: 800;

  --zx-leading-tight: 1.1;   /* große Überschriften */
  --zx-leading-snug: 1.3;    /* kleine Überschriften, Buttons */
  --zx-leading-normal: 1.6;  /* Fließtext */
  --zx-leading-loose: 1.8;   /* Reime, Fingerspiele */
  --zx-tracking-tight: -0.01em;
  --zx-tracking-wide: 0.06em; /* Eyebrows / Labels in Großbuchstaben */

  /* -------------------------------------------------------------------
     4. RADIEN – weich und rund
     ------------------------------------------------------------------- */
  --zx-radius-xs: 6px;
  --zx-radius-sm: 10px;
  --zx-radius-md: 16px;
  --zx-radius-lg: 24px;
  --zx-radius-xl: 32px;
  --zx-radius-blob: 42% 58% 55% 45% / 48% 42% 58% 52%; /* organische Deko-Form */
  --zx-radius-pill: 999px;

  /* -------------------------------------------------------------------
     5. SCHATTEN – weich, leicht violett, plus farbiges Leuchten
     ------------------------------------------------------------------- */
  --zx-shadow-xs: 0 1px 2px rgba(76, 29, 149, .08);
  --zx-shadow-sm: 0 2px 6px rgba(76, 29, 149, .08), 0 1px 2px rgba(76, 29, 149, .06);
  --zx-shadow-md: 0 8px 24px -6px rgba(76, 29, 149, .16), 0 2px 6px rgba(76, 29, 149, .06);
  --zx-shadow-lg: 0 20px 48px -12px rgba(76, 29, 149, .25), 0 4px 12px rgba(76, 29, 149, .08);
  --zx-glow-violet: 0 0 0 1px rgba(139, 92, 246, .25), 0 8px 28px -4px rgba(139, 92, 246, .45);
  --zx-glow-cyan:   0 0 0 1px rgba(34, 211, 238, .30), 0 8px 28px -4px rgba(34, 211, 238, .45);
  --zx-glow-amber:  0 0 0 1px rgba(251, 191, 36, .35), 0 8px 28px -4px rgba(251, 191, 36, .50);
  --zx-glow-coral:  0 0 0 1px rgba(251, 113, 133, .30), 0 8px 28px -4px rgba(251, 113, 133, .45);
  --zx-focus-ring: 0 0 0 3px var(--zx-bg), 0 0 0 6px var(--zx-focus); /* doppelter Ring: auf jedem Untergrund sichtbar */

  /* -------------------------------------------------------------------
     6. ABSTÄNDE (4-px-Raster)
     ------------------------------------------------------------------- */
  --zx-space-0: 0;
  --zx-space-1: 0.25rem;  /*  4 px */
  --zx-space-2: 0.5rem;   /*  8 px */
  --zx-space-3: 0.75rem;  /* 12 px */
  --zx-space-4: 1rem;     /* 16 px */
  --zx-space-5: 1.5rem;   /* 24 px */
  --zx-space-6: 2rem;     /* 32 px */
  --zx-space-7: 3rem;     /* 48 px */
  --zx-space-8: 4rem;     /* 64 px */
  --zx-space-9: 6rem;     /* 96 px */
  --zx-space-section: clamp(3rem, 2rem + 4vw, 6rem);
  --zx-container: 1180px;
  --zx-tap-target: 44px;  /* Mindestgröße für Klickflächen */

  /* -------------------------------------------------------------------
     7. EBENEN (z-index)
     ------------------------------------------------------------------- */
  --zx-z-below: -1;
  --zx-z-base: 0;
  --zx-z-raised: 10;
  --zx-z-sticky: 100;
  --zx-z-header: 200;
  --zx-z-dropdown: 300;
  --zx-z-overlay: 400;
  --zx-z-modal: 500;
  --zx-z-toast: 600;
  --zx-z-mascot: 700;

  /* -------------------------------------------------------------------
     8. BEWEGUNG – Dauer und Kurven
     ------------------------------------------------------------------- */
  --zx-duration-instant: 80ms;
  --zx-duration-fast: 150ms;    /* Hover, Farbe */
  --zx-duration-base: 250ms;    /* Buttons, Karten */
  --zx-duration-slow: 450ms;    /* Ein-/Ausblenden */
  --zx-duration-slower: 800ms;
  --zx-duration-blink: 4.5s;    /* Blinzel-Zyklus */
  --zx-duration-wiggle: 3.2s;   /* Körper-Wackeln */
  --zx-duration-twinkle: 1.8s;  /* Antennen-Funkeln */
  --zx-duration-wave: 1.6s;     /* Winken */
  --zx-duration-float: 6s;      /* schwebende Deko */

  --zx-ease-out: cubic-bezier(.22, 1, .36, 1);          /* sanftes Abbremsen */
  --zx-ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --zx-ease-bounce: cubic-bezier(.34, 1.56, .64, 1);    /* kleines Federn */
  --zx-ease-spring: cubic-bezier(.5, 1.8, .4, .8);      /* verspielter Überschwinger */
  --zx-ease-linear: linear;

  color-scheme: light;
}

/* ---------------------------------------------------------------------
   Reduzierte Bewegung: Animationen praktisch abschalten
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --zx-duration-instant: 0.01ms;
    --zx-duration-fast: 0.01ms;
    --zx-duration-base: 0.01ms;
    --zx-duration-slow: 0.01ms;
    --zx-duration-slower: 0.01ms;
    --zx-duration-blink: 0.01ms;
    --zx-duration-wiggle: 0.01ms;
    --zx-duration-twinkle: 0.01ms;
    --zx-duration-wave: 0.01ms;
    --zx-duration-float: 0.01ms;
  }
}

/* ---------------------------------------------------------------------
   Optional: Dunkles Thema – <html data-theme="dark">
   Kontraste (auf --zx-bg #140a2e / --zx-surface #1f1442):
   Text #f5f3ff 17,21:1 / 15,48:1 · Nebentext #c9bfe6 10,86:1 / 9,76:1 ·
   Primär-Text #c4b5fd 10,22:1 / 9,20:1 – alle AA/AAA.
   --------------------------------------------------------------------- */
[data-theme="dark"] {
  --zx-primary: var(--zx-violet-400);        /* als Fläche: dunkler Text #140a2e darauf 6,94:1 */
  --zx-primary-strong: var(--zx-violet-300);
  --zx-primary-soft: rgba(167, 139, 250, .16);
  --zx-secondary-soft: rgba(34, 211, 238, .14);
  --zx-accent-soft: rgba(251, 191, 36, .14);
  --zx-warm-soft: rgba(251, 113, 133, .14);

  --zx-bg: #140a2e;
  --zx-bg-alt: #1a0f3a;
  --zx-surface: #1f1442;
  --zx-surface-glass: rgba(31, 20, 66, .62);
  --zx-border: #3a2b6b;
  --zx-border-strong: #7d6bb8;

  --zx-text: #f5f3ff;
  --zx-text-strong: #ffffff;
  --zx-text-muted: #c9bfe6;
  --zx-text-on-primary: #140a2e;

  --zx-success: #86efac;
  --zx-warn: #fcd34d;
  --zx-error: #fda4af;
  --zx-success-soft: rgba(134, 239, 172, .14);
  --zx-warn-soft: rgba(252, 211, 77, .14);
  --zx-error-soft: rgba(253, 164, 175, .14);
  --zx-focus: var(--zx-teal-300);

  --zx-grad-button: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
  --zx-grad-sky: radial-gradient(1200px 600px at 10% -10%, #2e1065 0%, transparent 60%),
                 radial-gradient(900px 500px at 100% 0%, #0e3a4a 0%, transparent 55%),
                 #140a2e;
  --zx-shadow-md: 0 8px 24px -6px rgba(0, 0, 0, .5);
  --zx-shadow-lg: 0 20px 48px -12px rgba(0, 0, 0, .6);
  color-scheme: dark;
}