/* DENTAL NEXUS — design tokens
   Two complete themes. Light is the default: pale blue-white grounds, quiet teal
   and soft medical blue. Dark is a deep navy tuned to the knowledge graph.
   Every surface, text, control and the graph itself read from these variables. */
:root {
  --font-en: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ar: "IBM Plex Sans Arabic", "Manrope", system-ui, "Segoe UI", Tahoma, sans-serif;
  --font: var(--font-ar);
  --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem;
  --fs-2xl: clamp(2rem, 1.2rem + 2.6vw, 3.1rem);
  --fs-3xl: clamp(2.5rem, 1.2rem + 3.4vw, 3.9rem);
  --r-sm: 8px; --r-md: 14px; --r-lg: 26px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: 160ms; --t-med: 320ms; --t-slow: 620ms;
  --header-h: 60px;
  --cyan: #64D6C7; --blue: #8CAFF1; --purple: #B39AF4; --rose: #D99CC3; --amber: #E2BA66;
}
html[lang="en"] { --font: var(--font-en); }

/* ---------- light (default) ---------- */
:root, :root[data-theme="light"] {
  color-scheme: light;
  --bg: #F6FAFC;
  --bg-wash: radial-gradient(1100px 620px at 88% -8%, #E2F0F2 0%, rgba(226,240,242,0) 62%),
             radial-gradient(900px 520px at -6% 22%, #EAF1FA 0%, rgba(234,241,250,0) 60%);
  --surface: #FFFFFF; --surface-2: #EDF4F6; --surface-3: #E6EFF3;
  --text: #18364B; --muted: #587085; --faint: #8BA0B1;
  --border: #E0EAF0; --border-strong: #CBDCE5;
  --primary: #0D5364; --primary-hover: #0A4352; --on-primary: #FFFFFF;
  --secondary: #65B8BB; --accent: #157E83; --accent-soft: rgba(101,184,187,.16);
  --warn: #8A5E0E; --warn-soft: rgba(226,186,102,.2); --danger: #A2416A; --evidence: #6A50C4; --personal: #946110;
  --header-bg: rgba(246,250,252,.84); --controls-bg: #F9FCFD; --panel-bg: #FFFFFF;
  --stage-1: #FFFFFF; --stage-2: #EDF5F8; --tip-bg: rgba(255,255,255,.98);
  --hover: rgba(13,83,100,.05); --shadow: rgba(24,54,75,.16); --scroll: #C7D8E1;
  --nx-label: #4D6579; --nx-label-hi: #18364B; --nx-label-focus: #0B2231;
  --nx-guide: rgba(13,83,100,.08); --nx-guide-dots: rgba(13,83,100,.2); --nx-ground: #FFFFFF;
  --nx-edge-op: .34; --nx-edge-op-dim: .05; --nx-edge-blend: multiply;
  --nx-match: #0F7C83; --nx-personal: #946110; --nx-band-op: .2; --nx-export-bg: #F6FAFC; --nx-title: #0D5364;
}

/* ---------- dark ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0D1826;
  --bg-wash: radial-gradient(1100px 620px at 88% -8%, #13283E 0%, rgba(19,40,62,0) 62%);
  --surface: #152638; --surface-2: #1B3047; --surface-3: rgba(34,57,81,.6);
  --text: #EAF4FA; --muted: #93A9BD; --faint: #6A8197;
  --border: #294459; --border-strong: #35566E;
  --primary: #64D6C7; --primary-hover: #82E1D5; --on-primary: #08202A;
  --secondary: #65B8BB; --accent: #64D6C7; --accent-soft: rgba(100,214,199,.12);
  --warn: #E2BA66; --warn-soft: rgba(226,186,102,.14); --danger: #E3A3C8; --evidence: #B39AF4; --personal: #E2BA66;
  --header-bg: rgba(13,24,38,.86); --controls-bg: #0A1420; --panel-bg: #132436;
  --stage-1: #132640; --stage-2: #0D1826; --tip-bg: rgba(21,38,56,.97);
  --hover: rgba(255,255,255,.05); --shadow: rgba(0,0,0,.6); --scroll: #2A4058;
  --nx-label: #A9BBCE; --nx-label-hi: #E8F0F7; --nx-label-focus: #FFFFFF;
  --nx-guide: rgba(140,175,241,.07); --nx-guide-dots: rgba(140,175,241,.16); --nx-ground: #0D1826;
  --nx-edge-op: .42; --nx-edge-op-dim: .04; --nx-edge-blend: screen;
  --nx-match: #64D6C7; --nx-personal: #E2BA66; --nx-band-op: .2; --nx-export-bg: #0D1826; --nx-title: #DCE7F0;
}

@media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; --t-slow: 0ms; } }