/* Constellation Writer — Hestini Theme (design-theme MCP, 2026-07-11)
   Light-first: white canvas, subtle gray surfaces, teal primary #079d9d.
   Var NAMES are the app contract — values map to the Hestini DESIGN.md.
   Every var used anywhere in css/*.css MUST be defined here: missing vars
   silently fall back to per-file defaults and fracture the theme (the
   dark-select-on-light-toolbar bug). */

:root {
  /* Base surfaces */
  --bg-base: #ffffff;          /* Background */
  --bg-primary: #ffffff;       /* alias */
  --bg-surface: #ffffff;
  --bg-secondary: #f5f5f5;     /* background-subtle: stage, wells */
  --bg-subtle: #f5f5f5;
  --bg-soft: #f7f7f7;          /* assistant surface */
  --bg-elevated: #f7f7f7;      /* raised panels, table headers */
  --bg-elev: #f7f7f7;          /* alias (legacy spelling) */
  --bg-input: #fcfcfc;         /* Input BG */
  --bg-sidebar: #fafafa;       /* Sidebar */
  --bg-topbar: #ffffff;        /* Topbar */
  --bg-graph: #fafafa;
  --bg-hover: #ececec;         /* hover item (softened from #e0e0e0 for large rows) */
  --hover-bg: rgba(7, 157, 157, 0.06);   /* tinted hover (nav/selection) */

  /* Borders */
  --border: #e5e7eb;           /* Border */
  --border-light: #ebebeb;     /* Divider Zone */
  --border-soft: #ebebeb;
  --border-subtle: #ebebeb;
  --border-faint: rgba(0, 0, 0, 0.04);
  --border-strong: #cbd5e1;
  --border-input: #e5e7eb;
  --border-focus: #079d9d;     /* focus ring on primary (input-focus #48f3ea is too faint on white) */
  --hover-border: #cbd5e1;

  /* Text */
  --text-primary: #1a1a1a;     /* Foreground */
  --text-secondary: #6b7280;   /* Foreground Muted */
  --text-tertiary: #9ca3af;
  --text-hint: #b3b9c2;
  --text-error: #ef4444;

  /* Brand / primary (Hestini teal) */
  --primary: #079d9d;
  --color-primary: #079d9d;
  --accent: #079d9d;
  --accent-blue: #079d9d;          /* Primary Teal (name kept for compat) */
  --accent-blue-hover: #078a9f;    /* darker hover — white text stays readable */
  --color-on-accent: #ffffff;
  --accent-gold: #09d3d3;          /* Primary Bright */
  --brand-gradient: linear-gradient(135deg, #0497af, #09d3d3);

  /* Status */
  --success: #10b981;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;
  --accent-amber: #f59e0b;

  /* Status tints + on-tint text (Hestini on-status pairs, L20 P6.4) —
     badge/pill backgrounds với chữ đạt contrast; research.css dùng thay hex */
  --success-tint: #d1fae5; --on-success: #065f46;
  --danger-tint: #fecaca;  --on-danger: #991b1b;
  --warning-tint: #fef3c7; --on-warning: #92400e;
  --info-tint: #dbeafe;    --on-info: #1e40af;

  /* Text-color palette (editor tc-*/hl-* — reading colors, not status) */
  --accent-green: #1aae39;
  --accent-red: #e03e3e;
  --accent-purple: #6b3fa0;
  --accent-cyan: #19af8b;          /* Secondary Green-Teal */
  --accent-orange: #dd5b00;

  /* Node status colors */
  --node-empty: #b3b9c2;
  --node-draft: #079d9d;
  --node-review: #6b3fa0;
  --node-final: #10b981;
  --node-illustration: #f59e0b;

  /* Diff */
  --diff-add: rgba(16, 185, 129, 0.12);
  --diff-remove: rgba(239, 68, 68, 0.12);

  /* Shadows (Hestini elevation levels 0/1/2) */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -2px rgba(0,0,0,.06);
  --shadow-lg: 0 16px 32px -4px rgba(0,0,0,.18), 0 8px 16px -8px rgba(0,0,0,.12);

  /* Layout */
  --left-panel-width: 280px;
  --right-panel-width: 340px;
  --topbar-height: 48px;
  --statusbar-height: 0px;

  /* Branding hook (org logo injected at runtime; none by default) */
  --logo-url: none;

  /* Typography — Inter (Hestini) with Noto Sans fallback (both full VN) */
  --font-sans: 'Inter', 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Inter Tight', 'Inter', 'Noto Sans', system-ui, sans-serif;
  --font-mono: 'Noto Sans Mono', 'SF Mono', 'Consolas', ui-monospace, monospace;
  --font-serif: 'Noto Serif', 'Georgia', ui-serif, serif;

  /* Type scale */
  --text-xs: 10px;
  --text-sm: 11px;
  --text-base: 13px;
  --text-md: 14px;
  --text-lg: 15px;
  --text-xl: 17px;

  /* Transitions */
  --transition-fast: 0.12s ease;
  --transition-normal: 0.2s ease;

  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 16px;
}