:root {
  /* ─── BACKGROUNDS ─────────────────────────────────────────── */
  --color-bg:           #f8f9fc;   /* off-white page background */
  --color-surface:      #ffffff;   /* card / panel background */
  --color-surface-alt:  #eef1f7;   /* alternate section background */
  --color-border:       #dde3ef;   /* borders and dividers */

  /* ─── DARK SECTIONS (hero, footer, CTA banners only) ─────── */
  --color-dark:         #060d1f;   /* deep navy */
  --color-dark-surface: #0c1a35;   /* slightly lighter navy for cards inside dark sections */
  --color-dark-border:  #1a3157;

  /* ─── ACCENT ──────────────────────────────────────────────── */
  --color-accent:       #f97316;   /* brand orange — buttons, links, logo */
  --color-accent-hover: #ea580c;
  --color-accent-light: #fb923c;
  --color-accent-muted: rgba(249, 115, 22, 0.08);
  --color-accent-border: rgba(249, 115, 22, 0.35);

  /* ─── TEXT ────────────────────────────────────────────────── */
  --color-text-primary:   #0d1b2e;   /* near-black with navy undertone — all headings */
  --color-text-secondary: #4a5f7a;   /* body text, descriptions */
  --color-text-muted:     #8a9bb0;   /* captions, labels, placeholders */
  --color-text-on-dark:   #ffffff;   /* text inside dark/navy sections */
  --color-text-on-dark-secondary: #a8bcd4;

  /* ─── TYPOGRAPHY ──────────────────────────────────────────── */
  --font-primary: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;   /* hero H1 only */

  /* ─── TYPE SCALE ──────────────────────────────────────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.75rem;
  --text-5xl:  3.75rem;   /* hero headline */

  /* ─── SPACING ─────────────────────────────────────────────── */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  5rem;
  --space-2xl: 8rem;

  /* ─── LAYOUT ──────────────────────────────────────────────── */
  --container-max: 1240px;
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   24px;
  --radius-pill: 999px;   /* buttons and service tags */

  /* ─── SHADOWS ─────────────────────────────────────────────── */
  --shadow-sm:   0 1px 4px rgba(13, 27, 46, 0.06);
  --shadow-md:   0 4px 16px rgba(13, 27, 46, 0.10);
  --shadow-lg:   0 8px 32px rgba(13, 27, 46, 0.14);
  --shadow-accent: 0 4px 20px rgba(249, 115, 22, 0.22);
  --shadow-blue: var(--shadow-accent);

  /* ─── TRANSITIONS ─────────────────────────────────────────── */
  --transition: 0.25s ease;

  /* ─── GLASS THEME ─────────────────────────────────────────── */
  --glass-blur:         16px;
  --glass-blur-strong:  24px;
  --glass-bg:           rgba(255, 255, 255, 0.55);
  --glass-bg-strong:    rgba(255, 255, 255, 0.78);
  --glass-bg-subtle:    rgba(255, 255, 255, 0.35);
  --glass-bg-dark:      rgba(6, 13, 31, 0.55);
  --glass-bg-dark-strong: rgba(6, 13, 31, 0.82);
  --glass-border:       rgba(255, 255, 255, 0.55);
  --glass-border-light: rgba(255, 255, 255, 0.28);
  --glass-border-dark:  rgba(255, 255, 255, 0.1);
  --glass-shadow:       0 8px 32px rgba(13, 27, 46, 0.08);
  --glass-shadow-dark:  0 8px 32px rgba(0, 0, 0, 0.28);
  --glass-inset:        inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --glass-inset-dark:   inset 0 1px 0 rgba(255, 255, 255, 0.08);
}