@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: #6e8bff;
  --ring: 0 0 0 3px color-mix(in srgb, #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);

  --shell-bg: #212138;
  --shell-bg-2: #2c2c42;
  --shell-text: rgba(255,255,255,0.74);
  --shell-text-strong: #ffffff;
  --shell-muted: rgba(255,255,255,0.5);
  --shell-hover: rgba(255,255,255,0.08);
  --shell-active: color-mix(in srgb, #6e8bff 24%, transparent);
  --shell-active-text: #ffffff;
  --shell-border: rgba(255,255,255,0.1);
  --shell-accent: #6e8bff;
  --shell-field: rgba(255,255,255,0.07);
  --shell-field-strong: rgba(255,255,255,0.1);
  --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);

  --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: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --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);

}

/* ── 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 {
  background-image: radial-gradient(color-mix(in srgb, var(--bg-effect-color, var(--fg)) calc(5% * var(--bg-effect-intensity, 1)), transparent) 1px, transparent 1px);
  background-size: 20px 20px; background-attachment: fixed;
}
body.bg-pattern-synapse {
  /* CSS grid as base, canvas pulses overlay */
  background-image: 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-size: 24px 24px; background-attachment: fixed;
}
body.bg-pattern-perlin-flow,
body.bg-pattern-petals,
body.bg-pattern-sparkles {
  /* canvas-only backgrounds */
}