:root{
  /* ── CLEAN INDUSTRIAL LIGHT THEME ── */
  --orange:#E87522;
  --orange-plain:#C95F17;
  --orange-dim:rgba(232,117,34,0.12);
  --orange-border:rgba(232,117,34,0.24);
  --orange-glow:rgba(232,117,34,0.26);

  --surface-page:#F4FBF8;
  --surface-band:#EAF5F3;
  --surface-card:#FFFFFF;
  --surface-line:#DDEDEA;
  --surface-soft:#CBE5E1;

  /* ── LEGACY ALIASES so component CSS keeps working ── */
  --ink:#2A6780;
  --surface-band-legacy:#EAF5F3;
  --surface-card-legacy:#FFFFFF;
  --surface-line-legacy:#DDEDEA;
  --surface-soft-legacy:#CBE5E1;
  --yellow:var(--orange);
  --yellow-plain:var(--orange-plain);
  --yellow-dim:var(--orange-dim);
  --yellow-border:var(--orange-border);
  --yellow-glow:var(--orange-glow);
  --shadow-yellow:0 12px 28px rgba(232,117,34,0.20);

  /* ── FIX: missing vars used throughout components.css ── */
  --border:rgba(42,103,128,0.15);
  --section-pad:128px;

  /* ── TEXT ── */
  --gray:#6F8790;
  --gray-light:#436474;
  --white:#244C62;
  --white-dim:rgba(36,76,98,0.72);
  --wa-green:#25D366;

  /* ── TYPOGRAPHY ── */
  --font-display:'Bebas Neue',sans-serif;
  --font-cond:'Barlow Condensed',sans-serif;
  --font-body:'Barlow',sans-serif;

  /* ── TYPE SCALE ── */
  --text-xs:12px;--text-sm:14px;--text-base:16px;--text-md:18px;
  --text-lg:21px;--text-xl:25px;--text-2xl:34px;
  --text-3xl:clamp(28px,4.5vw,56px);--text-4xl:clamp(36px,7vw,96px);

  /* ── SPACING ── */
  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:20px;
  --sp-6:24px;--sp-8:32px;--sp-10:40px;--sp-12:48px;--sp-16:64px;
  --sp-20:80px;--sp-28:112px;--sp-32:128px;

  /* ── SHAPE ── */
  --radius-sm:3px;--radius-md:6px;--radius-lg:12px;--radius-xl:20px;

  /* ── SHADOWS — mobile-optimised (reduced blur) ── */
  --shadow-sm:0 2px 10px rgba(42,103,128,0.09);
  --shadow-md:0 8px 24px rgba(42,103,128,0.12);
  --shadow-lg:0 14px 36px rgba(42,103,128,0.15);

  /* ── Z-INDEX SCALE ── */
  --z-base:1;
  --z-float:100;
  --z-dock:200;
  --z-overlay:300;
  --z-nav:400;
  --z-drawer:500;
  --z-modal:600;
  --z-toast:700;
  --z-ticker:800;

  /* ── MOTION ── */
  --ease:cubic-bezier(.4,0,.2,1);
  --fast:.16s;--base:.28s;--slow:.48s;

  /* ── LAYOUT ── */
  --max-w:1280px;--pad:clamp(16px,4vw,40px);--nav-h:72px;

  /* ── CALCULATOR PAGE (dark theme) ── */
  --navy-deepest:#0B1828;
  --navy:#0F2236;
  --navy-mid:#172D42;
}

/* ══ FONT DISPLAY OVERRIDE — prevent invisible text during font load (FOUT/CLS fix) ══ */
@font-face {
  font-family: 'Bebas Neue';
  font-display: swap;
  src: local('Bebas Neue');
}
@font-face {
  font-family: 'Barlow';
  font-display: swap;
  src: local('Barlow');
}
@font-face {
  font-family: 'Barlow Condensed';
  font-display: swap;
  src: local('Barlow Condensed');
}