/*
 * Lineagram brand layer — the ONE place to change the product's look.
 *
 * Loaded after app.css and the vendored Vibe kit (monday-ui-react-core, MIT licence —
 * see docs/brand.md). It only overrides design tokens; no component rules live here.
 *
 * Layers:  1. brand inputs  (GENERATED from cloud/site/brand/tokens.json — never edit by hand;
 *             run `node scripts/build-brand-tokens.js`)
 *          2. semantic tokens used by the app (hand-written, theme-agnostic: they reference
 *             inputs only, so light/dark/black differ only by the input values)
 *          3. dark/black remap = the generated dark input block + the kit-token re-pointing below.
 * Components must use semantic tokens only, never raw hex.
 */

/* ── 1. Brand inputs — light (generated) ──────────────────────────────────── */
/* BRAND-INPUTS-LIGHT:START */
/* GENERATED by scripts/build-brand-tokens.js from cloud/site/brand/tokens.json — do not edit by hand */
:root {
  --brand-50: #eef7f2;
  --brand-100: #d9eee3;
  --brand-200: #b3dcc8;
  --brand-300: #82c4a6;
  --brand-400: #4ea583;
  --brand-500: #2a8a68;
  --brand-600: #1f7a5a;
  --brand-700: #186249;
  --brand-800: #144e3b;
  --brand-900: #0f3b2d;
  --brand-primary: #1f7a5a;
  --brand-hover: #186249;
  --brand-selected: #d9eee3;
  --brand-selected-hover: #b3dcc8;
  --brand-highlight: #eef7f2;
  --on-brand: #ffffff;
  --neutral-0: #ffffff;
  --neutral-25: #f6f7f5;
  --neutral-50: #eef0ed;
  --neutral-200: #dde1dc;
  --neutral-300: #bcc3bb;
  --neutral-600: #566159;
  --neutral-900: #1a231f;
  --success: #18794e;
  --warning: #9a5b00;
  --danger: #c4283c;
  --info: #1d5fc4;
  --focus: #1f7a5a;
  --shadow-rgb: 26, 35, 31;
  --gender-male: #6ba3be;
  --gender-female: #c47f8a;
  --gender-unknown: #aaaaaa;
  --gender-other: #9b89b3;
  --node-male-fill: #e3f4e6;
  --node-female-fill: #fdebdd;
  --brand-radius-sm: 6px;
  --brand-radius-md: 10px;
  --brand-radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --motion-ease: cubic-bezier(0.2, 0, 0, 1);
  --brand-font: "Inter", "Figtree", "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
  --brand-title-font: "Inter", "Figtree", "Noto Sans Hebrew", "Noto Kufi Arabic", "Noto Sans JP", system-ui, -apple-system, "Segoe UI", sans-serif;
}
/* BRAND-INPUTS-LIGHT:END */

/* ── 3a. Brand inputs — dark / black (generated) ──────────────────────────── */
/* BRAND-INPUTS-DARK:START */
/* GENERATED by scripts/build-brand-tokens.js from cloud/site/brand/tokens.json — do not edit by hand */
.dark-app-theme,
.black-app-theme {
  --brand-primary: #4ea583;
  --brand-hover: #82c4a6;
  --brand-selected: #14392b;
  --brand-selected-hover: #1a4a38;
  --brand-highlight: #112c22;
  --on-brand: #0a1f17;
  --neutral-0: #121a16;
  --neutral-25: #121a16;
  --neutral-50: #19231e;
  --neutral-200: #2c3932;
  --neutral-300: #4a5a50;
  --neutral-600: #a2b0a7;
  --neutral-900: #e8eee9;
  --success: #4cc38a;
  --warning: #f0b44c;
  --danger: #ff7b8b;
  --info: #7db0ff;
  --focus: #82c4a6;
  --shadow-rgb: 0, 0, 0;
  --node-male-fill: #1d3a2c;
  --node-female-fill: #3b2a26;
}
.black-app-theme {
  --neutral-0: #090d0b;
  --neutral-25: #090d0b;
  --neutral-50: #111713;
  --neutral-200: #222c26;
  --neutral-300: #43524a;
}
/* BRAND-INPUTS-DARK:END */

/* ── 2. Semantic tokens (one definition for every theme) ──────────────────── */
:root,
.dark-app-theme,
.black-app-theme {
  --font-family: var(--brand-font);
  --title-font-family: var(--brand-title-font);
  --border-radius-small: var(--brand-radius-sm);
  --border-radius-medium: var(--brand-radius-md);
  --border-radius-big: var(--brand-radius-lg);

  --primary-color: var(--brand-primary);
  --primary-hover-color: var(--brand-hover);
  --primary-selected-color: var(--brand-selected);
  --primary-selected-hover-color: var(--brand-selected-hover);
  --primary-highlighted-color: var(--brand-highlight);
  --brand-color: var(--brand-primary);
  --brand-hover-color: var(--brand-hover);
  --brand-selected-color: var(--brand-selected);
  --brand-selected-hover-color: var(--brand-selected-hover);
  --link-color: var(--brand-hover);
  --color-basic_blue: var(--brand-primary);
  --color-dark_blue: var(--brand-hover);
  --color-highlight_blue: var(--brand-selected);
  --text-color-on-primary: var(--on-brand);
  --text-color-on-brand: var(--on-brand);

  --primary-text-color: var(--neutral-900);
  --secondary-text-color: var(--neutral-600);
  --placeholder-color: var(--neutral-600);
  --icon-color: var(--neutral-600);
  --primary-background-color: var(--neutral-0);
  --secondary-background-color: var(--neutral-0);
  --allgrey-background-color: var(--neutral-25);
  --primary-surface-color: var(--neutral-50);
  --ui-border-color: var(--neutral-300);
  --layout-border-color: var(--neutral-200);
  --ui-background-color: var(--neutral-50);
  --ui-background-hover-color: var(--neutral-200);
  --disabled-background-color: var(--neutral-50);
  --primary-background-hover-color: color-mix(in srgb, var(--neutral-900) 7%, transparent);
  --backdrop-color: color-mix(in srgb, var(--neutral-900) 55%, transparent);

  --positive-color: var(--success);
  --positive-color-hover: color-mix(in srgb, var(--success) 85%, var(--neutral-900));
  --positive-color-selected: color-mix(in srgb, var(--success) 18%, var(--neutral-0));
  --positive-color-selected-hover: color-mix(in srgb, var(--success) 26%, var(--neutral-0));
  --negative-color: var(--danger);
  --negative-color-hover: color-mix(in srgb, var(--danger) 85%, var(--neutral-900));
  --negative-color-selected: color-mix(in srgb, var(--danger) 18%, var(--neutral-0));
  --negative-color-selected-hover: color-mix(in srgb, var(--danger) 26%, var(--neutral-0));
  --warning-color: var(--warning);
  --warning-color-hover: color-mix(in srgb, var(--warning) 85%, var(--neutral-900));
  --warning-color-selected: color-mix(in srgb, var(--warning) 18%, var(--neutral-0));
  --warning-color-selected-hover: color-mix(in srgb, var(--warning) 26%, var(--neutral-0));
  --color-success: var(--success);
  --color-error: var(--danger);
  --info-color: var(--info);
  --focus-ring: 0 0 0 2px var(--neutral-0), 0 0 0 4px var(--focus);

  --canvas-bg: var(--neutral-25);       /* page behind the floating panels */
  --brand-glow: color-mix(in srgb, var(--brand-primary) 32%, transparent);
  --surface-shadow: 0 1px 2px rgba(var(--shadow-rgb), 0.05), 0 4px 16px rgba(var(--shadow-rgb), 0.06);
  --box-shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), 0.06);
  --box-shadow-small: 0 2px 8px rgba(var(--shadow-rgb), 0.10);
  --box-shadow-medium: 0 8px 24px rgba(var(--shadow-rgb), 0.14);
  --box-shadow-large: 0 16px 48px rgba(var(--shadow-rgb), 0.20);
}
.dark-app-theme, .black-app-theme {
  --canvas-bg: var(--neutral-0);
  --surface-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  --secondary-background-color: var(--neutral-50);
  --primary-surface-color: var(--neutral-50);
  --ui-background-color: var(--neutral-200);
  --ui-background-hover-color: var(--neutral-300);
  --disabled-background-color: var(--neutral-200);
  --color-surface: var(--neutral-50);
  color-scheme: dark;
}

/* Surfaces use the shared soft shadow. */
.topbar, .sidebar, .inspector, .welcome-screen, .table-outer, .tree-svg {
  box-shadow: var(--surface-shadow);
}
:focus-visible { outline: none; box-shadow: var(--focus-ring); }