@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/Inter-SemiBold.woff2') format('woff2'); }

@font-face { font-family: 'ABC Arizona'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/custom/arizona/ABCArizona-Regular.woff2') format('woff2'); }
@font-face { font-family: 'ABC Arizona'; font-weight: 500; font-style: normal; font-display: swap; src: url('/static/fonts/custom/arizona/ABCArizona-Medium.woff2') format('woff2'); }
@font-face { font-family: 'ABC Arizona'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/custom/arizona/ABCArizona-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-weight: 300; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Light.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-weight: 400; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Fira Code'; font-weight: 600; font-style: normal; font-display: swap; src: url('/static/fonts/FiraCode-SemiBold.woff2') format('woff2'); }

/* Shared first-paint Midnight defaults. The active theme supplies the values
   after initialization; components only consume these semantic tokens. */
:root {
  --bg: #0f1420;
  --canvas: #0f1420;
  --fg: #e6ebf5;
  --panel: #161c2b;
  --surface: #161c2b;
  --surface-2: #1d2331;
  --surface-3: #1d2331;
  --surface-elevated: #1d2331;
  --surface-hover: #252a39;
  --surface-selected: #212a47;
  --container: #111623;
  --sidebar-background: #111623;
  --composer-background: #1e2433;
  --border: #2e3756;
  --border-subtle: #2e3756;
  --border-strong: #565f79;
  --red: #6e8bff;
  --brand: #6e8bff;
  --accent: #6e8bff;
  --brand-strong: #7f99ff;
  --accent-hover: #7f99ff;
  --brand-text: #6e8bff;
  --brand-soft: color-mix(in srgb, #6e8bff 20%, #161c2b);
  --text: #e6ebf5;
  --text-primary: #e6ebf5;
  --text-2: #a6abb5;
  --text-secondary: #a6abb5;
  --text-3: #9196a3;
  --text-muted: #9196a3;
  --text-faint: #6e737e;
  --text-2-glass: #aeb3bd;
  --text-3-glass: #9ba0ad;
  --danger: #e0454a;
  --danger-ink: #eb8689;
  --danger-soft: color-mix(in srgb, #e0454a 16%, #161c2b);
  --danger-line: color-mix(in srgb, #e0454a 30%, #161c2b);
  --warn: #d97a06;
  --warn-ink: #e6a95d;
  --warn-soft: color-mix(in srgb, #d97a06 16%, #161c2b);
  --warn-line: color-mix(in srgb, #d97a06 30%, #161c2b);
  --caution: #ca9e03;
  --caution-ink: #ddc05b;
  --caution-soft: color-mix(in srgb, #ca9e03 16%, #161c2b);
  --caution-line: color-mix(in srgb, #ca9e03 30%, #161c2b);
  --ok: #15a05c;
  --ok-ink: #67c195;
  --ok-soft: color-mix(in srgb, #15a05c 16%, #161c2b);
  --ok-line: color-mix(in srgb, #15a05c 30%, #161c2b);
  --info: #2f6feb;
  --info-ink: #78a1f2;
  --info-soft: color-mix(in srgb, #2f6feb 16%, #161c2b);
  --info-line: color-mix(in srgb, #2f6feb 30%, #161c2b);
  --contract: #19c5c0;
  --contract-strong: #39cdc9;
  --contract-ink: #6ad9d6;
  --contract-soft: color-mix(in srgb, #19c5c0 16%, #161c2b);
  --contract-line: color-mix(in srgb, #19c5c0 30%, #161c2b);
  --on-brand: #111111;
  --focus-ring: var(--accent, #6e8bff);
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent, #6e8bff) 40%, transparent);
  --ring-shadow: var(--ring);
  --e1: 0 1px 2px rgba(0,0,0,.4);
  --e2: 0 4px 12px rgba(0,0,0,.45);
  --e3: 0 16px 40px rgba(0,0,0,.55);
  /* Alleen de kleur-component, voor schaduwen met een eigen geometrie (een
     omhoog geworpen sheet-schaduw, een custom offset) die verder dezelfde
     "schaduw is altijd donker, ongeacht thema"-conventie volgen als e1/e2/e3. */
  --rf-shadow-color: rgba(0,0,0,.45);

  --shell-bg: var(--color-surface);
  --shell-bg-2: var(--color-surface-raised);
  --shell-text: var(--color-text-muted);
  --shell-text-strong: var(--color-text);
  --shell-muted: var(--color-text-muted);
  --shell-hover: color-mix(in srgb, var(--color-text) 8%, transparent);
  --shell-active: color-mix(in srgb, var(--accent, #6e8bff) 24%, transparent);
  --shell-active-text: var(--color-text);
  --shell-border: var(--color-border);
  --shell-accent: var(--accent, #6e8bff);
  --shell-field: color-mix(in srgb, var(--color-text) 7%, transparent);
  --shell-field-strong: color-mix(in srgb, var(--color-text) 10%, transparent);
  --shell-logo-filter: none;
  /* Semantische laag. Engine blijft de bron; componenten leunen hierop. */
  --color-canvas: var(--bg);
  --color-surface: var(--surface, var(--panel));
  --color-surface-raised: var(--surface-2, var(--surface-elevated, var(--panel)));
  --color-border: var(--border);
  --color-text: var(--text, var(--fg));
  --color-text-muted: var(--text-2, var(--text-secondary, var(--fg)));
  --color-accent: var(--accent, var(--brand, var(--red)));
  --color-accent-hover: var(--accent-hover, var(--brand-strong, var(--color-accent)));
  --color-focus: var(--focus-ring, var(--color-accent));
  --color-success: var(--ok);
  --color-warning: var(--warn);
  --color-danger: var(--danger);
  --color-error: var(--danger);
  --color-error-light: var(--danger);
  --color-recording: var(--danger);
  --color-recording-hover: var(--danger);
  --color-save-green: var(--ok);
  --green: var(--ok);
  --color-muted: var(--color-text-muted);
  --color-muted-alt: var(--color-text-muted);
  --color-brand-blue: var(--color-accent);
  --color-agent-active: var(--color-success);
  --color-link-hover: var(--color-accent-hover);
  --color-subheader: var(--color-text-muted);
  --color-blind-orange: var(--color-warning);
  --accent-warm: var(--color-accent);

  --rf-bg-0: var(--color-canvas);
  --rf-bg-1: var(--color-surface);
  --rf-bg-2: var(--color-surface-raised);
  --rf-bg-3: color-mix(in srgb, var(--color-surface) 86%, var(--color-text));

  --rf-border: var(--color-border);
  --rf-border-focus: var(--color-focus);

  --rf-text-0: var(--color-text);
  --rf-text-1: var(--color-text-muted);
  --rf-text-2: var(--color-text-muted);

  --rf-accent: var(--color-accent);
  --rf-accent-hover: var(--color-accent-hover);
  --rf-accent-muted: color-mix(in srgb, var(--color-accent) 22%, transparent);
  --rf-accent-subtle: color-mix(in srgb, var(--color-accent) 12%, transparent);

  --rf-success: var(--color-success);
  --rf-warning: var(--color-warning);
  --rf-error: var(--color-danger);
  --rf-info: var(--color-accent);

  /* Glans-hoogsel bovenin een op --brand gekleurde knop (rf-btn-primary).
     Zit altijd op een gekleurd vlak, niet op de canvas-achtergrond, dus
     licht/donker geeft dezelfde witte sheen — vast per ontwerp. */
  --rf-btn-sheen: rgba(255,255,255,.2);
  --rf-btn-sheen-strong: rgba(255,255,255,.22);
  /* Zelfde categorie: het lichtpunt waar een verlopende knop naartoe ophelt
     (color-mix(... var(--brand) 93%, var(--rf-gloss))). Losstaand van
     --on-brand (dat is de leesbare TEKSTkleur op het merkvlak; dit is een
     decoratief hoogsel, altijd wit). */
  --rf-gloss: #fff;
  /* Het donkere tegenovergestelde: het mengpunt waar een hover/actieve staat
     naartoe verdonkert (color-mix(... 85%, var(--rf-shade))), en de opaque
     marker in de CSS mask-image-truc (--rf-mask-ring hierboven) —
     zwart = volledig zichtbaar in een mask, geen kleur. */
  --rf-shade: #000;

  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s8: 32px;
  --rf-space-1: var(--s1);
  --rf-space-2: var(--s2);
  --rf-space-3: var(--s3);
  --rf-space-4: var(--s4);
  --rf-space-5: var(--s5);
  --rf-space-6: var(--s6);
  --rf-space-8: var(--s8);
  --rf-space-10: 40px;
  --rf-space-12: 48px;
  --rf-space-16: 64px;

  /* De fontkeuze geldt ook voor navigatie, formulieren en losse pagina's. */
  --rf-font: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --rf-mono: var(--rf-font);
  --font: var(--rf-font);
  --mono: var(--rf-font);
  --rf-control-height: 34px;
  --rf-header-height: 52px;
  --rf-page-padding: 20px;

  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-body: 14px;
  --fs-h2: 15px;
  --fs-h1: 21px;
  --fs-xl: 26px;
  --fs-num: 30px;
  --fs-display: 38px;
  --rf-text-xs: var(--fs-2xs);
  --rf-text-sm: var(--fs-xs);
  --rf-text-base: var(--fs-body);
  --rf-text-md: var(--fs-h2);
  --rf-text-lg: var(--fs-h1);
  --rf-text-xl: var(--fs-xl);
  --rf-text-2xl: var(--fs-num);
  --rf-text-display: var(--fs-display);

  --rf-leading-tight: 1.25;
  --rf-leading-normal: 1.45;
  --rf-leading-relaxed: 1.625;

  --rf-weight-normal: 400;
  --rf-weight-medium: 500;
  --rf-weight-semibold: 600;
  --rf-weight-bold: 700;
  --rf-weight-extrabold: 800;

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-pill: 999px;
  --rf-radius-sm: var(--r-sm);
  --rf-radius: var(--r-md);
  --rf-radius-lg: var(--r-lg);
  --rf-radius-xl: var(--r-xl);
  --rf-radius-2xl: var(--r-2xl);
  --rf-radius-pill: var(--r-pill);

  /* Eén laag per schaduw. De gestapelde dubbele schaduwen lieten elk kaartje
     zweven; hoogte hoort iets te betekenen, niet de standaardtoestand te zijn.
     Vlakken scheiden doen we met een rand, niet met wazigheid. */
  --rf-shadow-sm: var(--e1);
  --rf-shadow: var(--e2);
  --rf-shadow-lg: var(--e3);
  --rf-shadow-glow: var(--ring);

  --dur-fast: 120ms;
  --dur: 200ms;
  --ease: cubic-bezier(.2,.7,.3,1);
  --rf-dur-fast: var(--dur-fast);
  --rf-dur: var(--dur);
  --rf-dur-slow: 350ms;

  --rf-ease: var(--ease);
  --rf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --rf-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

  --rf-glass-bg: color-mix(in srgb, var(--color-surface) 78%, transparent);
  --rf-glass-blur: 16px;
  --rf-glass-border: var(--color-border);

  /* Backdrop-filter recipes voor overlays/modals buiten het liquid-glass-thema.
     Elke context zet zijn eigen waarde; de declaratie zelf blijft var(..., none)
     zodat alleen echte overlays het effect krijgen. */
  --rf-backdrop-modal: blur(3px);
  --rf-backdrop-fab: blur(10px);
  --rf-backdrop-settings-scrim: blur(4px);
  --rf-backdrop-mobile-rail: blur(18px) saturate(135%);

  /* Gedeeld mask-recept voor een gradient-rand-ring (XOR van content-box en
     border-box) — puur een alpha-mask, geen zichtbare kleurovergang. */
  --rf-mask-ring: linear-gradient(var(--rf-shade) 0 0) content-box, linear-gradient(var(--rf-shade) 0 0);

  /* Edge-fade masks: an overflowing strip dissolves into the bar instead of
     being hard-cut. Alpha masks only, no visible color gradient. */
  --rf-mask-fade-both: linear-gradient(to right, transparent 0, var(--rf-shade) 18px, var(--rf-shade) calc(100% - 18px), transparent 100%);
  --rf-mask-fade-left: linear-gradient(to right, var(--rf-shade) 0, var(--rf-shade) calc(100% - 18px), transparent 100%);
  --rf-mask-fade-right: linear-gradient(to right, transparent 0, var(--rf-shade) 18px, var(--rf-shade) 100%);
  --rf-mask-fade-bottom: linear-gradient(to bottom, var(--rf-shade) 70%, transparent);

  /* Gedeelde agent-avatar gradient (paars, geen per-agent hue gezet). */
  --rf-grad-agent-avatar-default: linear-gradient(135deg, hsl(262 70% 60%), hsl(292 72% 48%));

  /* Gedeelde primaire-knop gloss (merkkleur -> hoogsel boven, merkkleur onder). */
  --rf-grad-btn-primary: linear-gradient(180deg, color-mix(in srgb, var(--brand) 93%, var(--rf-gloss)), var(--brand));
  --rf-grad-btn-primary-hover: linear-gradient(180deg, color-mix(in srgb, var(--brand) 88%, var(--rf-gloss)), var(--brand));

  /* Verticale fade-mask, zelfde recept als de horizontale --rf-mask-fade-*. */
  --rf-mask-fade-vertical: linear-gradient(to bottom, transparent, var(--rf-shade) 18px, var(--rf-shade) calc(100% - 18px), transparent);
}

/* ── Background Patterns ── */

:root { --bg-effect-intensity: 1; }

/* Canvas-based effects — single source of truth for intensity */
#synapse-canvas, #rain-canvas, #constellations-canvas,
#perlin-flow-canvas, #petals-canvas, #sparkles-canvas,
#embers-canvas {
  opacity: var(--bg-effect-intensity, 1);
}

body.bg-pattern-dots {
  --grad-bg-pattern-dots: radial-gradient(color-mix(in srgb, var(--bg-effect-color, var(--fg)) calc(5% * var(--bg-effect-intensity, 1)), transparent) 1px, transparent 1px);
  background-image: var(--grad-bg-pattern-dots);
  background-size: 20px 20px; background-attachment: fixed;
}
body.bg-pattern-synapse {
  /* CSS grid as base, canvas pulses overlay */
  --grad-bg-pattern-synapse: linear-gradient(color-mix(in srgb, var(--bg-effect-color, var(--fg)) calc(3.5% * var(--bg-effect-intensity, 1)), transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--bg-effect-color, var(--fg)) calc(3.5% * var(--bg-effect-intensity, 1)), transparent) 1px, transparent 1px);
  background-image: var(--grad-bg-pattern-synapse);
  background-size: 24px 24px; background-attachment: fixed;
}
body.bg-pattern-perlin-flow,
body.bg-pattern-petals,
body.bg-pattern-sparkles {
  /* canvas-only backgrounds */
}