/* Naxape design tokens - the single source of brand and UI colours.
   Components reference these variables only; never hardcode colours elsewhere. */
:root {
  /* Brand (do not change) */
  --brand-cyan: #00CFE5;
  --brand-navy: #131A21;

  /* Workspace */
  --app-background: #F7F9FB;
  --surface: #FFFFFF;
  --surface-muted: #F2F5F8;
  --surface-hover: #EEF3F6;
  --text-primary: #17212B;
  --text-secondary: #667381;
  --text-muted: #8A96A2;
  --border: #E1E7EC;
  --border-strong: #CBD4DC;

  /* Interaction */
  --focus: var(--brand-cyan);
  --focus-ring: 0 0 0 3px rgba(0, 207, 229, 0.28);
  --primary: var(--brand-cyan);
  --primary-hover: #00BBD0;
  --primary-text: var(--brand-navy);
  --accent-soft: #E3F9FC;
  --accent-ink: #00788A;   /* cyan-family text that meets contrast on white */

  /* Sidebar */
  --sidebar-bg: var(--brand-navy);
  --sidebar-text: #FFFFFF;
  --sidebar-text-secondary: #A8B4BE;
  --sidebar-active-bg: #202C36;
  --sidebar-indicator: var(--brand-cyan);

  /* Status */
  --danger: #C84646;
  --danger-hover: #B23B3B;
  --danger-soft: #FCEDED;
  --warning: #B7791F;
  --warning-soft: #FDF5E6;
  --success: #1F9254;
  --success-soft: #E8F6EE;

  /* Shape & rhythm */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow-sm: 0 1px 2px rgba(19, 26, 33, 0.06);
  --shadow: 0 2px 8px rgba(19, 26, 33, 0.08);
  --shadow-lg: 0 12px 40px rgba(19, 26, 33, 0.18);
  --input-height: 36px;
  --sidebar-width: 232px;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}