/* LotteAI Belcentrale design tokens ("Midnight Glass" + Thema-studio).
 *
 * One source of truth for the console (console.css), the softphone
 * (softphone.css, also the incoming-call toast and the desktop call window)
 * and the meeting page. Components only use these custom properties.
 *
 * theme-core.js resolves the user's theme (one of ~20 ready-made themes plus
 * fine-tuning) and paints it before the first frame:
 *   - data attributes on <html>: data-preset (theme id), data-scheme
 *     (light | dark), data-bg (solid | gradient | glow | noise | pattern),
 *     data-pattern, data-glass, data-density, data-font (text size),
 *     data-font-family, data-side-style (bar | pill | filled),
 *     data-btn-style (filled | soft | outline), data-depth, data-motion;
 *   - every palette/shape token below as a CSS property on <html>, set
 *     through the CSSOM (element.style.setProperty: allowed by the strict
 *     CSP "style-src 'self'", no inline <style>, no style attributes).
 * The blocks below are the static fallback (first paint without JS) and the
 * rules the attributes switch. No external hosts: fonts are self-hosted
 * (fonts/OFL.txt, fonts/OFL-Inter.txt), noise and patterns are inline SVG
 * data URIs.
 */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin.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: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-latin-ext.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: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-mono-latin.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: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/geist-mono-latin-ext.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: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-400.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: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-600.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: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-ext-400.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: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-ext-600.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;
}

/* ------------------------------------------- base: Midnight Graphite (default) */
:root {
  color-scheme: dark;

  /* typography */
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs: 1;
  --t-2xs: calc(10.5px * var(--fs));
  --t-xs: calc(11.5px * var(--fs));
  --t-sm: calc(12.5px * var(--fs));
  --t-base: calc(13.5px * var(--fs));
  --t-md: calc(15px * var(--fs));
  --t-lg: calc(18px * var(--fs));
  --t-xl: calc(24px * var(--fs));
  --t-2xl: calc(30px * var(--fs));
  --t-kpi: calc(36px * var(--fs));

  /* spacing + shape (density changes these) */
  --gap: 20px;
  --gap-sm: 12px;
  --pad: 22px;
  --pad-sm: 14px;
  --cell-y: 12px;
  --cell-x: 14px;
  --control-h: 38px;
  --control-h-sm: 30px;
  --radius-xl: 22px;
  --radius: 16px;
  --radius-sm: 11px;
  --radius-xs: 7px;
  --pill: 999px;

  /* palette (preset) */
  --bg: #0A0C11;
  --bg-top: #10141D;
  --glow-1: rgba(46, 84, 196, .30);
  --glow-2: rgba(78, 116, 230, .12);
  --glow-3: rgba(255, 255, 255, .035);
  --surface-solid: #13161D;
  --glass-subtle: linear-gradient(180deg, rgba(160, 182, 235, .075), rgba(160, 182, 235, .03));
  --glass-strong: linear-gradient(180deg, rgba(160, 182, 235, .11), rgba(160, 182, 235, .045));
  --surface-2: rgba(255, 255, 255, .035);
  --surface-3: rgba(255, 255, 255, .07);
  --surface-inset: rgba(0, 0, 0, .22);
  --popover: #161A23;
  --border: rgba(255, 255, 255, .085);
  --border-strong: rgba(255, 255, 255, .16);
  --highlight: rgba(255, 255, 255, .07);
  --text: #F4F6FA;
  --text-2: #C3C9D4;
  --muted: #8E96A6;
  --accent: #5B8CFF;
  --accent-text: #8DB0FF;
  --accent-ink: #06122E;
  --side-accent: #8DB0FF;
  --ok: #3FD69A;
  --warn: #F6BE5B;
  --danger: #FF7A86;
  --info: #6FB3FF;
  --violet: #B39CFF;
  --teal: #4FD3C4;
  --klant: #4FD3C4;
  --medewerker: #9DB9FF;
  --ai: #B39CFF;
  --white-accent: #FFFFFF;
  --white-accent-ink: #0A0C11;

  /* sidebar */
  --side-bg: rgba(4, 6, 10, .38);
  --side-border: rgba(255, 255, 255, .06);
  --side-text: #C3C9D4;
  --side-muted: #8E96A6;
  --side-strong: #FFFFFF;
  --side-hover: rgba(255, 255, 255, .045);
  --side-card: rgba(255, 255, 255, .035);
  --side-solid: #0A0C11;
  --side-accent-fill: var(--side-accent);
  --side-accent-ink: #0A0C11;
  --side-w: 252px;

  /* buttons (Thema-studio: colour, shape, style, size) */
  --btn-bg: var(--accent);
  --btn-ink: var(--accent-ink);
  --btn-soft-text: var(--accent-text);
  --btn-radius: var(--pill);
  --btn-scale: 1;
  --ok-ink: #03251A;
  --warn-ink: #2A1A02;
  --danger-ink: #22060A;

  /* effects */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow: 0 24px 48px -28px rgba(0, 0, 0, .85);
  --shadow-pop: 0 30px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .06);
  --overlay: rgba(3, 5, 9, .62);
  --glow-strength: 1;
  --noise-dot: 1;
  --pattern: none;
  --pattern-size: 24px 24px;
  --pattern-color: rgba(91, 140, 255, .12);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* derived (follow --accent and the status colours automatically) */
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 38%, transparent);
  --accent-soft-ink: var(--accent-text);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, white);
  --ok-soft: color-mix(in srgb, var(--ok) 13%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 13%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 13%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 13%, transparent);
  --violet-soft: color-mix(in srgb, var(--violet) 14%, transparent);
  --teal-soft: color-mix(in srgb, var(--teal) 13%, transparent);
  --klant-soft: color-mix(in srgb, var(--klant) 13%, transparent);
  --medewerker-soft: color-mix(in srgb, var(--medewerker) 14%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 50%, transparent);

  /* glass (data-glass) and page background (data-bg) */
  --card-bg: var(--glass-subtle);
  --card-blur: none;
  --card-edge: inset 0 1px 0 var(--highlight);
  --page-bg:
    radial-gradient(1100px 640px at 6% -12%, var(--glow-1), transparent 62%),
    radial-gradient(860px 540px at 104% -2%, var(--glow-2), transparent 60%),
    radial-gradient(900px 680px at 62% 122%, var(--glow-3), transparent 60%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 58%);
}

/* ---------------------------------------------------- Midnight Blue (concept A) */
:root[data-preset="midnight"] {
  --bg: #050A1C;
  --bg-top: #0A1536;
  --glow-1: rgba(64, 104, 255, .32);
  --glow-2: rgba(56, 210, 196, .13);
  --glow-3: rgba(120, 90, 255, .14);
  --surface-solid: #0C1530;
  --glass-subtle: linear-gradient(180deg, rgba(150, 180, 255, .08), rgba(150, 180, 255, .03));
  --glass-strong: linear-gradient(180deg, rgba(150, 180, 255, .12), rgba(150, 180, 255, .05));
  --surface-2: rgba(170, 195, 255, .045);
  --surface-3: rgba(170, 195, 255, .09);
  --surface-inset: rgba(2, 6, 20, .35);
  --popover: #0E1938;
  --border: rgba(170, 195, 255, .12);
  --border-strong: rgba(170, 195, 255, .22);
  --text: #EEF2FF;
  --text-2: #B6C2E2;
  --muted: #8D9BC2;
  --accent: #7DA6FF;
  --accent-text: #9DBDFF;
  --accent-ink: #06102A;
  --side-accent: #9DBDFF;
  --ok: #4FE0A0;
  --warn: #FFC86B;
  --danger: #FF7D8A;
  --info: #7DA6FF;
  --violet: #B9A2FF;
  --teal: #5FE3CF;
  --klant: #5FE3CF;
  --medewerker: #A9C3FF;
  --ai: #B9A2FF;
  --side-bg: rgba(4, 9, 26, .45);
  --side-solid: #050A1C;
  --side-border: rgba(170, 195, 255, .1);
  --side-text: #B6C2E2;
  --side-muted: #8D9BC2;
  --side-hover: rgba(170, 195, 255, .06);
  --side-card: rgba(170, 195, 255, .05);
  --white-accent-ink: #050A1C;
}

/* ------------------------------------------------------------------ Daylight */
:root[data-preset="daylight"] {
  color-scheme: light;
  --bg: #F2F4F8;
  --bg-top: #FFFFFF;
  --glow-1: rgba(59, 100, 240, .11);
  --glow-2: rgba(16, 32, 80, .06);
  --glow-3: rgba(59, 100, 240, .07);
  --surface-solid: #FFFFFF;
  --glass-subtle: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .74));
  --glass-strong: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .55));
  --surface-2: rgba(13, 22, 38, .035);
  --surface-3: rgba(13, 22, 38, .065);
  --surface-inset: rgba(13, 22, 38, .04);
  --popover: #FFFFFF;
  --border: rgba(13, 22, 38, .1);
  --border-strong: rgba(13, 22, 38, .18);
  --highlight: rgba(255, 255, 255, .9);
  --text: #0D1626;
  --text-2: #2E3A4E;
  --muted: #586377;
  --accent: #2F5BEA;
  --accent-text: #2450D6;
  --accent-ink: #FFFFFF;
  --side-accent: #8DB0FF;
  --ok: #047857;
  --warn: #8F4E05;
  --danger: #C02639;
  --info: #0367A6;
  --violet: #6D3FD9;
  --teal: #0F766E;
  --klant: #0F766E;
  --medewerker: #2450D6;
  --ai: #6D3FD9;
  --white-accent: #0D1626;
  --white-accent-ink: #FFFFFF;
  --side-bg: #0E1424;
  --side-solid: #0E1424;
  --side-border: rgba(255, 255, 255, .06);
  --side-text: #C7CEDB;
  --side-muted: #8E97AA;
  --side-strong: #FFFFFF;
  --side-hover: rgba(255, 255, 255, .055);
  --side-card: rgba(255, 255, 255, .05);
  --shadow-sm: 0 1px 2px rgba(13, 22, 38, .06);
  --shadow: 0 1px 2px rgba(13, 22, 38, .04), 0 18px 36px -22px rgba(13, 22, 38, .22);
  --shadow-pop: 0 30px 70px -24px rgba(13, 22, 38, .35), 0 0 0 1px rgba(13, 22, 38, .06);
  --overlay: rgba(13, 22, 38, .38);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0.05 0 0 0 0 0.15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, black);
  --ok-soft: color-mix(in srgb, var(--ok) 10%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 11%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 9%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 10%, transparent);
  --violet-soft: color-mix(in srgb, var(--violet) 10%, transparent);
  --teal-soft: color-mix(in srgb, var(--teal) 10%, transparent);
  --klant-soft: color-mix(in srgb, var(--klant) 10%, transparent);
  --medewerker-soft: color-mix(in srgb, var(--medewerker) 10%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ------------------------------------------------- High contrast (WCAG AAA-ish) */
:root[data-preset="contrast"] {
  --bg: #000000;
  --bg-top: #000000;
  --glow-1: transparent;
  --glow-2: transparent;
  --glow-3: transparent;
  --surface-solid: #0B0B0B;
  --glass-subtle: #0B0B0B;
  --glass-strong: #0B0B0B;
  --surface-2: #161616;
  --surface-3: #242424;
  --surface-inset: #000000;
  --popover: #0B0B0B;
  --border: rgba(255, 255, 255, .42);
  --border-strong: #FFFFFF;
  --highlight: transparent;
  --text: #FFFFFF;
  --text-2: #F0F0F0;
  --muted: #CDCDCD;
  --accent: #9CC3FF;
  --accent-text: #9CC3FF;
  --accent-ink: #000000;
  --side-accent: #9CC3FF;
  --ok: #5CF2B0;
  --warn: #FFD27A;
  --danger: #FF9AA4;
  --info: #9CC3FF;
  --violet: #D2C2FF;
  --teal: #7FF0E2;
  --klant: #7FF0E2;
  --medewerker: #C4D8FF;
  --ai: #D2C2FF;
  --side-bg: #000000;
  --side-solid: #000000;
  --side-border: rgba(255, 255, 255, .42);
  --side-text: #F0F0F0;
  --side-muted: #CDCDCD;
  --side-hover: #1C1C1C;
  --side-card: #0B0B0B;
  --shadow: none;
  --shadow-sm: none;
  --overlay: rgba(0, 0, 0, .8);
  --focus: 0 0 0 3px #FFD84D;
  --accent-soft: color-mix(in srgb, var(--accent) 22%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok) 18%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 18%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 18%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 18%, transparent);
  --violet-soft: color-mix(in srgb, var(--violet) 18%, transparent);
  --klant-soft: color-mix(in srgb, var(--klant) 18%, transparent);
  --medewerker-soft: color-mix(in srgb, var(--medewerker) 18%, transparent);
}

/* ------------------------------------------- any light theme (data-scheme) */
/* Derived tokens tuned for light backgrounds (Daylight, Clean wit, Roze, …);
 * theme-core.js sets the palette itself. */
:root[data-scheme="light"] {
  color-scheme: light;
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 30%, transparent);
  --accent-hover: color-mix(in srgb, var(--accent) 86%, black);
  --ok-soft: color-mix(in srgb, var(--ok) 10%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 11%, transparent);
  --danger-soft: color-mix(in srgb, var(--danger) 9%, transparent);
  --info-soft: color-mix(in srgb, var(--info) 10%, transparent);
  --violet-soft: color-mix(in srgb, var(--violet) 10%, transparent);
  --teal-soft: color-mix(in srgb, var(--teal) 10%, transparent);
  --klant-soft: color-mix(in srgb, var(--klant) 10%, transparent);
  --medewerker-soft: color-mix(in srgb, var(--medewerker) 10%, transparent);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0.05 0 0 0 0 0.15 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-scheme="dark"] { color-scheme: dark; }
:root[data-preset="contrast-licht"] { --focus: 0 0 0 3px #B35C00; }

/* ---------------------------------------------------------------- background */
:root[data-bg="solid"], :root[data-preset="contrast"], :root[data-preset="contrast-licht"] { --page-bg: var(--bg); }
:root[data-bg="gradient"]:not([data-preset="contrast"]) {
  --page-bg: linear-gradient(180deg, var(--bg-top) 0%, var(--bg) 62%);
}
:root[data-bg="noise"]:not([data-preset="contrast"]) {
  --page-bg: var(--noise), radial-gradient(1000px 600px at 6% -12%, var(--glow-1), transparent 64%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 62%);
}

/* Built-in patterns (Thema-studio, data-bg="pattern"): an SVG mask tinted with
 * --pattern-color (the accent, low opacity) on a fixed layer behind the page.
 * Built-in only: no uploads, no external images. */
:root[data-bg="pattern"]:not([data-preset="contrast"]):not([data-preset="contrast-licht"]) {
  --page-bg: radial-gradient(1000px 600px at 6% -12%, var(--glow-1), transparent 64%),
    linear-gradient(180deg, var(--bg-top), var(--bg) 62%);
}
:root[data-bg="pattern"]:not([data-preset="contrast"]):not([data-preset="contrast-licht"]) body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-color: var(--pattern-color);
  -webkit-mask-image: var(--pattern); mask-image: var(--pattern);
  -webkit-mask-size: var(--pattern-size); mask-size: var(--pattern-size);
}
[data-pattern="dots"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22'%3E%3Ccircle cx='3' cy='3' r='1.5'/%3E%3C/svg%3E"); --pattern-size: 22px 22px; }
[data-pattern="grid"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M28 .5H.5V28' fill='none' stroke='black'/%3E%3C/svg%3E"); --pattern-size: 28px 28px; }
[data-pattern="diagonal"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M-4 4l8-8M0 16L16 0M12 20l8-8' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E"); --pattern-size: 16px 16px; }
[data-pattern="waves"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M0 20c7-6 13-6 20 0s13 6 20 0' fill='none' stroke='black' stroke-width='1.3'/%3E%3C/svg%3E"); --pattern-size: 40px 40px; }
[data-pattern="hearts"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M22 31s-8-5-8-10.5a4 4 0 0 1 8-1.6 4 4 0 0 1 8 1.6C30 26 22 31 22 31z'/%3E%3C/svg%3E"); --pattern-size: 44px 44px; }
[data-pattern="stars"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M12 5l1.7 3.5 3.8.6-2.8 2.7.7 3.8L12 13.8l-3.4 1.8.7-3.8-2.8-2.7 3.8-.6zM36 29l1 2.1 2.3.3-1.7 1.6.4 2.3-2-1.1-2 1.1.4-2.3-1.7-1.6 2.3-.3z'/%3E%3C/svg%3E"); --pattern-size: 48px 48px; }
[data-pattern="leaves"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cpath d='M14 42c0-13 9-22 24-24-2 15-11 24-24 24zM14 42l13-13' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E"); --pattern-size: 56px 56px; }
[data-pattern="confetti"] { --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Crect x='8' y='10' width='7' height='2.6' rx='1.3' transform='rotate(30 11 11)'/%3E%3Ccircle cx='44' cy='14' r='2'/%3E%3Crect x='30' y='40' width='7' height='2.6' rx='1.3' transform='rotate(-25 33 41)'/%3E%3Ccircle cx='12' cy='48' r='1.6'/%3E%3Crect x='48' y='50' width='6' height='2.4' rx='1.2' transform='rotate(60 51 51)'/%3E%3C/svg%3E"); --pattern-size: 64px 64px; }

/* --------------------------------------------------------------------- glass */
:root[data-glass="off"], :root[data-preset="contrast"], :root[data-preset="contrast-licht"] {
  --card-bg: var(--surface-solid);
  --card-blur: none;
}
:root[data-glass="strong"]:not([data-preset="contrast"]) {
  --card-bg: var(--glass-strong);
  --card-blur: blur(22px) saturate(1.3);
}
@media (prefers-reduced-transparency: reduce) {
  :root { --card-bg: var(--surface-solid); --card-blur: none; }
}

/* ------------------------------------------------------------------- density */
:root[data-density="compact"] {
  --gap: 14px;
  --gap-sm: 8px;
  --pad: 16px;
  --pad-sm: 10px;
  --cell-y: 7px;
  --cell-x: 12px;
  --control-h: 32px;
  --control-h-sm: 26px;
  --radius-xl: 18px;
  --radius: 13px;
}

/* ----------------------------------------------------------------- font size */
:root[data-font="s"] { --fs: .93; }
:root[data-font="l"] { --fs: 1.08; }
:root[data-font="xl"] { --fs: 1.17; }

/* ------------------------------------------------------------------- motion */
/* "Minder beweging" in the studio; the OS setting (prefers-reduced-motion) is
 * honoured in console.css as well. */
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation: none !important; transition: none !important; scroll-behavior: auto !important;
}