@font-face {
  font-family: "Flamenco";
  src: url("../assets/fonts/Flamenco/Flamenco-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("../assets/fonts/Space_Grotesk/SpaceGrotesk-VariableFont_wght.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --font-ui: "Space Grotesk", "Segoe UI", sans-serif;
  --font-display: "Space Grotesk", "Inter", sans-serif;
  --font-mono: "Space Grotesk", "Consolas", "SFMono-Regular", "Liberation Mono", monospace;

  --bg: #111923;
  --surface: #182430;
  --surface-1: #1b2a36;
  --surface-2: #1e2e3c;
  --surface-3: #263a4a;
  --surface-high: #30485a;
  --surface-elevated: #2b4150;
  --surface-contrast: #0c131b;

  --panel: var(--surface-2);
  --panel-2: var(--surface-3);
  --panel-3: #30485a;
  --input-bg: #111d28;
  --canvas-bg: #101a25;
  --node-bg: #1d2c3a;
  --node-border: #627b8e;

  --border: #496274;
  --border-strong: #6b8798;
  --border-subtle: #304657;
  --outline: #a7c1d1;
  --outline-soft: rgba(167, 193, 209, 0.2);

  --text: #e7eff4;
  --text-strong: #f7fafc;
  --muted: #a6bac7;
  --muted-2: #7f97a7;
  --text-muted: var(--muted);
  --text-soft: #cbdbe4;
  --node-title: #f7fafc;

  --accent: #179b95;
  --accent-dark: #117a76;
  --accent-light: #6cd4c9;
  --accent-glow: rgba(23, 155, 149, 0.2);
  --accent-select: #9de9df;
  --accent-2: #e4a168;

  --danger: #f07f79;
  --danger-dark: #bd574f;
  --success: #78dba7;
  --warning: #edb26f;
  --node-warm: #f6cf83;

  --chat-user-bg: #137c79;
  --chat-user-text: #f7fafc;
  --chat-assistant-bg: #1e2e3c;
  --chat-assistant-border: #496274;

  --grid-line-major: rgba(167, 193, 209, 0.13);
  --grid-line-minor: rgba(167, 193, 209, 0.045);
  --grid-size: 28px;
  --canvas-dot: rgb(167 193 209 / 0.18);

  --radius-sm: 6px;
  --radius: 10px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;

  --shadow-sm: 0 2px 8px rgba(2, 6, 8, 0.24);
  --shadow: 0 10px 28px rgba(2, 6, 8, 0.32);
  --shadow-lg: 0 18px 42px rgba(2, 6, 8, 0.4);
  --overlay-bg: rgba(9, 13, 15, 0.66);
  --modal-overlay-bg: rgba(9, 13, 15, 0.58);
  --mobile-backdrop-bg: rgba(9, 13, 15, 0.54);

  --glass-pane-bg: color-mix(in srgb, var(--canvas-custom-bg, var(--surface)) 94%, transparent);
  --workspace-bar-bg: color-mix(in srgb, var(--topbar-custom-bg, var(--surface)) 92%, transparent);
  --workspace-bar-border-color: color-mix(in srgb, var(--border) 66%, transparent);
  --glass-pane-border: 1px solid color-mix(in srgb, var(--border) 66%, transparent);
  --glass-pane-highlight: inset 0 1px 0 color-mix(in srgb, #ffffff 5%, transparent);
  --glass-pane-blur: blur(10px) saturate(108%);

  --transition: 0.18s ease;

  /* Layout breakpoints (keep in sync with js/config.js) */
  --bp-phone: 560px;
  --bp-compact: 760px;
  --bp-mobile: 920px;
  --bp-tablet: 1100px;
  --bp-wide: 1200px;

  --topbar-main-h: 52px;
  --modeling-bar-h: 0px;
  --topbar-h: var(--topbar-main-h);
  --rail-w: 52px;
  --sidebar-w-default: 248px;
  --inspector-w: clamp(300px, 32vw, 380px);
  --impact-w: clamp(320px, 34vw, 420px);
  --mobile-dock-h: 0px;
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: env(safe-area-inset-left, 0px);
}

html.light {
  color-scheme: light;

  --bg: #f5f3ed;
  --surface: #fcfbf7;
  --surface-1: #f6f7f3;
  --surface-2: #ebe8df;
  --surface-3: #d7e9e5;
  --surface-high: #ffffff;
  --surface-elevated: #ffffff;
  --surface-contrast: #fcfbf7;

  --panel: #fcfbf7;
  --panel-2: #ebe8df;
  --panel-3: #d7e9e5;
  --input-bg: #fcfbf7;
  --canvas-bg: #f5f3ed;
  --node-bg: #fcfbf7;
  --node-border: #abc9c3;

  --border: #ccd2cf;
  --border-strong: #91aaa6;
  --border-subtle: #e2e5e1;
  --outline: #617178;
  --outline-soft: rgba(7, 93, 91, 0.16);

  --text: #102c3a;
  --text-strong: #102c3a;
  --muted: #617178;
  --muted-2: #7d8a8c;
  --text-muted: var(--muted);
  --text-soft: #2c4652;
  --node-title: #075d5b;

  --accent: #075d5b;
  --accent-dark: #064846;
  --accent-light: #087b78;
  --accent-glow: rgba(7, 93, 91, 0.18);
  --accent-select: #087b78;
  --accent-2: #b4653c;

  --danger: #b84e44;
  --danger-dark: #8f3831;
  --success: #087b78;
  --warning: #b4653c;
  --node-warm: #f4d98b;

  --chat-user-bg: #075d5b;
  --chat-user-text: #fcfbf7;
  --chat-assistant-bg: #fcfbf7;
  --chat-assistant-border: #ccd2cf;

  --grid-line-major: rgba(97, 113, 120, 0.16);
  --grid-line-minor: rgba(97, 113, 120, 0.07);
  --canvas-dot: rgba(7, 93, 91, 0.24);

  --shadow-sm: 0 1px 3px rgba(16, 44, 58, 0.1), 0 6px 14px rgba(16, 44, 58, 0.08);
  --shadow: 0 8px 24px rgba(16, 44, 58, 0.13);
  --shadow-lg: 0 16px 34px rgba(16, 44, 58, 0.18);
  --overlay-bg: rgba(245, 243, 237, 0.74);
  --modal-overlay-bg: rgba(245, 243, 237, 0.66);
  --mobile-backdrop-bg: rgba(235, 232, 223, 0.7);
  --glass-pane-bg: color-mix(in srgb, var(--canvas-custom-bg, var(--canvas-bg)) 72%, transparent);
  --glass-pane-border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
  --glass-pane-highlight: inset 0 0 0 1px color-mix(in srgb, #fff 72%, transparent);
  --glass-pane-blur: blur(12px) saturate(116%);
}