/* ==========================================================================
   Design tokens — the single source of colors, shapes, depth and motion.
   Loaded first. Every other stylesheet reads these variables; none redefines them.
   ========================================================================== */
:root{
  /* ---- Base palette (unchanged brand values) ---- */
  --bg:#EAE9E4;
  --panel:#ffffff;
  --panel2:#ffffff;
  --line:rgba(62,61,86,.22);
  --text:#262638;
  --muted:#7A7888;
  --good:#9BC39A;
  --warn:#DDC9C4;
  --bad:#D96B6B;
  --accent:#2A2737;
  --accent2:#3F3C57;
  --chip:#ECE9E2;
  --font:'Manrope', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  --page-bg:#EAE9E3;
  --card:#FFFFFF;
  --hdr:#272630;
  --hdr-ctl:#2D2A42;
  --hdr-btn:#494662;
  --ink:#2C2B36;
  --muted2:#8C8A98;
  --bar:#3F3B56;
  --spo:#9AC398;
  --inc:#BAE0E6;
  --opening:#5A86C5;
  --closure:#FFB54C;
  --contracts:#A8CFDF;
  --contacts:#CFD3DF;
  --media:#DFB8A8;

  /* ---- Semantic colors ---- */
  --surface:#ffffff;
  --surface-soft:#F7F6F3;          /* quiet fill inside cards */
  --surface-sunken:#F1EFEA;        /* inputs on soft areas, table heads */
  --border:rgba(62,61,86,.12);
  --border-strong:rgba(62,61,86,.22);
  --violet:#5D53B4;                /* interactive accent */
  --violet-ink:#403976;
  --violet-soft:#EFECFA;
  --violet-ring:rgba(93,83,180,.22);
  --text-2:#504A6D;                /* secondary ink on light */
  --success:#1F7A52; --success-soft:#E9F6EF;
  --warning:#9A6414; --warning-soft:#FFF5E3;
  --danger:#A83E48;  --danger-soft:#FCEDEE;
  --info:#3E6E9A;    --info-soft:#EAF2FA;

  /* ---- Header (dark band) ---- */
  --header-bg:#3F3C57;
  --header-bg-2:#36334C;
  --header-ink:#ffffff;
  --header-ink-2:rgba(255,255,255,.72);
  --header-ctl:rgba(255,255,255,.08);
  --header-ctl-hover:rgba(255,255,255,.15);
  --header-ctl-border:rgba(255,255,255,.13);

  /* ---- Shape ---- */
  --radius-xl:28px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;
  --radius-xs:9px;
  --radius-pill:999px;

  /* ---- Spacing ---- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:28px;
  --space-7:36px;

  /* ---- Control sizes ---- */
  --ctl-sm:30px;
  --ctl-md:38px;
  --ctl-lg:44px;

  /* ---- Depth ---- */
  --shadow-sm:0 2px 10px rgba(27,27,46,.06);
  --shadow-md:0 14px 30px rgba(27,27,46,.10);
  --shadow-lg:0 24px 56px rgba(27,27,46,.16);
  --shadow-xl:0 40px 90px rgba(27,27,46,.22);
  --shadow-pop:0 24px 60px rgba(32,30,52,.18), 0 2px 6px rgba(32,30,52,.06);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.6);
  --focus-ring:0 0 0 3px var(--violet-ring);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.22,.61,.18,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.3,1.25,.4,1);
  --dur-fast:.15s;
  --dur:.24s;
  --dur-slow:.42s;

  /* ---- Layers ---- */
  --z-header:30;
  --z-sheet:6000;
  --z-modal:9500;
  --z-dialog:10200;               /* forms & confirmations: above settings and the hotel card */
  --z-popover:9000;
  --z-toast:10080;

  /* legacy aliases still read by inline styles in JS */
  --shadow:var(--shadow-md);
  --radius:var(--radius-xl);
  --radiusSm:var(--radius-md);
  --radiusXs:var(--radius-sm);
  --dark:var(--accent2);
}