/* ==========================================================================
   Citalix — Design tokens
   Derived from the reference analysis (see GAUNTLET-REPORT.md §1):
   light grey canvas, white rectangular cards, 4–5px radius, almost-invisible
   shadows, #556EE6 primary, compact 13px body copy, 15px card titles.
   ========================================================================== */
:root {
  /* Brand */
  --primary: #556ee6;
  --primary-hover: #485fcc;
  --primary-dark: #3445a5;
  --primary-soft: rgba(85, 110, 230, 0.12);
  --primary-softer: rgba(85, 110, 230, 0.06);
  --lavender: #d4dbf9;

  /* Semantic */
  --success: #34c38f;
  --success-soft: rgba(52, 195, 143, 0.15);
  --info: #50a5f1;
  --info-soft: rgba(80, 165, 241, 0.15);
  --warning: #f1b44c;
  --warning-soft: rgba(241, 180, 76, 0.18);
  --danger: #f46a6a;
  --danger-soft: rgba(244, 106, 106, 0.15);
  --purple: #7474f7;
  --purple-soft: rgba(116, 116, 247, 0.15);
  --muted: #74788d;
  --muted-soft: rgba(116, 120, 141, 0.15);
  --blocked: #a6b0cf;

  /* Booking states (single source of truth for calendar, badges, charts) */
  --st-confirmed: var(--primary);
  --st-completed: var(--success);
  --st-pending: var(--warning);
  --st-cancelled: var(--danger);
  --st-in_progress: var(--purple);
  --st-no_show: #8a8fa3;
  --st-blocked: var(--blocked);

  /* Surfaces */
  --body-bg: #f8f8fb;
  --header-bg: #ffffff;
  --card-bg: #ffffff;
  --soft-bg: #f3f4f8;
  --hover-bg: #f8f9fa;
  --border: #eff2f7;
  --border-strong: #e2e5ec;
  --input-border: #ced4da;

  /* Text */
  --text: #343a40;
  --text-2: #495057;
  --text-muted: #74788d;
  --text-light: #adb5bd;
  --heading: #343a40;

  /* Type */
  --font: "Poppins", "Segoe UI", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-base: 13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 18px;
  --fs-kpi: 20px;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Geometry */
  --radius-sm: 3px;
  --radius: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --shadow-card: 0 0.75rem 1.5rem rgba(18, 38, 63, 0.03);
  --shadow-drop: 0 0.5rem 1.6rem rgba(18, 38, 63, 0.12);
  --shadow-modal: 0 1rem 3rem rgba(18, 38, 63, 0.18);

  /* Layout */
  --header-h: 70px;
  --nav-h: 52px;
  --gutter: 24px;
  --card-pad: 20px;
  --container-max: 1640px;

  /* Motion */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --t-fast: 120ms;
  --t: 200ms;
}

body.density-compact {
  --gutter: 16px;
  --card-pad: 16px;
}