/* =========================================================================
   design-system tokens
   Source of truth: design_handoff_irix_installer_overview/design/_ds/…/tokens/
   Reference these custom properties from component CSS — do not hard-code hex.
   ========================================================================= */

:root {
  /* ---------- Corporate ---------- */
  --dcs-navy-900: #0a2640;
  --dcs-navy-800: #0d2e4d;
  --dcs-navy-700: #103858;   /* primary navy from logo */
  --dcs-navy-600: #1a4870;
  --dcs-navy-500: #2a5e8a;
  --dcs-navy-400: #4d7da6;
  --dcs-navy-300: #7da0c2;
  --dcs-navy-200: #b6cadd;
  --dcs-navy-100: #dee7f0;
  --dcs-navy-50:  #eff3f8;

  --dcs-mark-grey: #909090;

  /* ---------- Product palette (one accent per product) ---------- */
  --irix: #10a850;          /* booking engine — fresh green */
  --irix-tint: #c8ecd6;
  --irix-shade: #0c7d3c;

  /* ---------- Pool / water-quality accent (cyan) ---------- */
  --water: #0891b2;         /* pool water — cyan */
  --water-tint: #cbeef7;
  --water-shade: #0e7490;

  /* ---------- Neutrals (cool grey) ---------- */
  --grey-950: #0e1620;
  --grey-900: #1a2533;
  --grey-800: #2a3949;
  --grey-700: #3e5063;
  --grey-600: #56697d;
  --grey-500: #7387a0;
  --grey-400: #9aa9bd;
  --grey-300: #c2ccda;
  --grey-200: #dde3ec;
  --grey-150: #e8edf3;
  --grey-100: #f1f4f8;
  --grey-50:  #f7f9fc;
  --grey-0:   #ffffff;

  /* ---------- Semantic ---------- */
  --success: #10a850;
  --success-soft: #def3e6;
  --warning: #e9a23b;
  --warning-soft: #fbecd0;
  --danger:  #d4453d;
  --danger-soft: #f8d8d5;
  --info:    #2a78c4;
  --info-soft: #d6e6f5;

  /* ---------- Semantic aliases (USE THESE in components) ---------- */
  --bg-page:        var(--grey-50);
  --bg-canvas:      var(--grey-0);
  --bg-muted:       var(--grey-100);
  --bg-inverse:     var(--dcs-navy-700);
  --bg-inverse-strong: var(--dcs-navy-900);

  --surface-card:   var(--grey-0);
  --surface-raised: var(--grey-0);
  --surface-sunken: var(--grey-100);

  --text-primary:   var(--dcs-navy-700);
  --text-body:      var(--grey-800);
  --text-muted:     var(--grey-600);
  --text-subtle:    var(--grey-500);
  --text-on-dark:   var(--grey-0);
  --text-link:      var(--dcs-navy-600);

  --border-strong:  var(--grey-300);
  --border-default: var(--grey-200);
  --border-subtle:  var(--grey-150);
  --border-focus:   var(--dcs-navy-500);

  --accent:         var(--dcs-navy-700);
  --accent-hover:   var(--dcs-navy-800);
  --accent-press:   var(--dcs-navy-900);
  --accent-soft:    var(--dcs-navy-50);

  /* ---------- Typography ---------- */
  --font-sans: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Nunito Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;
  --fw-black:    900;

  --text-h1: 36px;
  --text-base: 15px;
  --text-sm: 13px;
  --text-xs: 12px;
  --text-2xs: 11px;

  --lh-tight:  1.1;
  --lh-snug:   1.25;
  --lh-normal: 1.45;
  --lh-relaxed:1.6;

  --ls-display: -0.01em;
  --ls-tight:   -0.005em;
  --ls-caps:    0.08em;

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-full: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:   0 1px 2px 0 rgba(16, 56, 88, 0.06);
  --shadow-sm:   0 1px 3px 0 rgba(16, 56, 88, 0.08), 0 1px 2px -1px rgba(16, 56, 88, 0.04);
  --shadow-md:   0 4px 10px -2px rgba(16, 56, 88, 0.10), 0 2px 4px -2px rgba(16, 56, 88, 0.06);
  --shadow-lg:   0 12px 24px -8px rgba(16, 56, 88, 0.16), 0 4px 8px -4px rgba(16, 56, 88, 0.08);
  --shadow-focus: 0 0 0 3px rgba(42, 94, 138, 0.35);
  --shadow-inset: inset 0 1px 2px 0 rgba(16, 56, 88, 0.06);

  /* ---------- Motion ---------- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   180ms;
  --dur-slow:   260ms;
}

/* ---------- Minimal base/reset (scoped to the redesigned installer) -------- */
.installer *,
.installer *::before,
.installer *::after { box-sizing: border-box; }

body.installer-page {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.installer ::selection { background: var(--dcs-navy-200); color: var(--dcs-navy-900); }