:root {
  /* --- Brand colors (do not add new colors — extend via opacity of these) --- */
  --black: #000000;
  --blue:  #0000FF;
  --white: #FFFFFF;
  --amber: #FFBF00;
 
  --black-60: rgba(0, 0, 0, 0.6);
  --black-15: rgba(0, 0, 0, 0.15);
  --black-08: rgba(0, 0, 0, 0.08);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-15: rgba(255, 255, 255, 0.15);
  --white-08: rgba(255, 255, 255, 0.08);
 
  /* --- Supporting neutrals (NOT new brand colors) ---
     Used only as background/surface depth so sections can have a "Soft" and
     "Dark-secondary" mode without touching the four official brand colors
     above. Never used as accent, border, icon, or text-emphasis color. */
  --surface-soft: #F5F5F3;
  --surface-soft-2: #EFEFED;
  --charcoal: #111111;
  --charcoal-2: #171717;
 
  /* RGB triplets of the official brand colors, for use inside rgba() glow/shadow
     effects. Keep in sync with --blue / --amber above — do not introduce new hues. */
  --blue-rgb: 0, 0, 255;
  --amber-rgb: 255, 191, 0;
 
  /* --- Supporting tonal system (Stage 1) ---
     NOT new brand colors. Xova's identity stays black / blue / amber /
     white. These tiers exist to build depth and atmosphere in backgrounds,
     panels, borders and secondary text on top of that identity — never
     used for the logo, primary CTAs, or anything brand-critical. Values
     are deliberately chosen from the same family as the neutrals above. */
  --ink-950: #050A1A;   /* deepest dark surface — a whisper of navy, not flat black */
  --ink-900: #0B1020;   /* primary dark-section surface */
  --ink-800: #111827;   /* elevated surface on a dark section (panels/menus) */
  --ink-700: #1E293B;   /* borders/dividers on dark sections */
 
  --slate-600: #475569; /* secondary text on light surfaces, stronger than --black-60 */
  --slate-400: #94A3B8; /* muted labels/metadata, works on both light and dark */
  --slate-200: #E2E8F0; /* hairline borders on light surfaces */
 
  --paper-50: #F8FAFC;  /* softest off-white surface, alternative to flat --white */
 
  /* Low-opacity glow tokens — background primitives only, never text/borders. */
  --glow-blue-soft: rgba(var(--blue-rgb), 0.10);
  --glow-blue-strong: rgba(var(--blue-rgb), 0.22);
  --glow-amber-soft: rgba(var(--amber-rgb), 0.08);
  --glow-amber-strong: rgba(var(--amber-rgb), 0.18);
 
  /* --- Elevation system (Stage 1) ---
     A real tier scale. --shadow-signature is the site's original hard
     offset shadow, preserved exactly — now a deliberate "one featured
     element" treatment rather than the default for every card and button.
     --shadow-lg-on-dark exists because a soft shadow is invisible against
     an already-dark surface; dark-on-dark panels need more contrast. */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.16);
  --shadow-lg-on-dark: 0 20px 40px rgba(0, 0, 0, 0.55);
  --shadow-signature: 4px 4px 0 var(--black);
  --shadow-signature-amber: 6px 6px 0 var(--amber);
  --shadow-glow-blue: 0 0 40px var(--glow-blue-soft);
  --shadow-glow-amber: 0 0 40px var(--glow-amber-soft);
 
  /* --- Radius (extends --radius-sm / --radius-md above) --- */
  --radius-xs: 4px;
  --radius-lg: 24px;
  --radius-full: 999px;
 
  /* --- Border weights ---
     Reference tokens for later stages. Existing hardcoded 1px/1.5px/2px
     borders sitewide are unchanged for now — nothing to migrate yet. */
  --border-width-hairline: 1px;
  --border-width-md: 1.5px;
  --border-width-lg: 2px;
 
  /* --- Transitions (extends --ease-snap / --dur-* above) --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-instant: 120ms;
  --dur-slower: 750ms;
 
  /* --- Container widths (extends --container-max above) --- */
  --container-narrow: 860px;
  --container-wide: 1400px;
 
  /* --- Stacking order (Stage 2 / revised) ---
     Documented once here rather than as magic numbers scattered across the
     header/nav rules. The mobile nav panel is a full-screen takeover with
     its own logo + close row, so it sits ABOVE the sticky header (not
     beneath it) while open — --z-dropdown stays highest since desktop's
     Services dropdown must still win against the sticky header on the
     widths where it's used, though it never overlaps the mobile panel in
     practice since the two only exist at different breakpoints. */
  --z-header: 50;
  --z-mobile-nav: 60;
  --z-dropdown: 2000;
 
  /* --- Breakpoint reference ---
     Fluid type below covers most of this range without extra media
     queries. Discrete breakpoints stay reserved for genuine structural
     changes (nav collapse, column count), not type or spacing alone.
     1440 / 1366 / 1280 / 1024 / 900 / 820 / 768 / 600 / 480 / 430 / 390 / 375 / 360 / 320 */
 
  /* --- Typography --- */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
 
  /* Headings + kicker are fluid: they scale continuously between a 375px
     and a 1280px viewport, then hold at the min/max. This replaces the old
     fixed-step jump at exactly 1024px and 767px. Body copy sizes are left
     static — fluid body text risks line-length/reflow issues for little
     visual benefit at this scale. */
  --fs-h1: clamp(32px, 22.06px + 2.65vw, 56px);
  --fs-h2: clamp(28px, 19.71px + 2.21vw, 48px);
  --fs-h3: clamp(22px, 17.88px + 1.11vw, 32px);
  --fs-h4: clamp(18px, 16.35px + 0.44vw, 22px);
  --fs-kicker: clamp(12px, 11.18px + 0.22vw, 14px);
  --fs-body-lg: 20px;
  --fs-body: 17px;
  --fs-small: 14px;
 
  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 16px;
 
  /* --- Layout --- */
  --container-max: 1240px;
  --gutter: 32px;
 
  /* --- Section rhythm --- */
  --section-pad: 120px;
  --section-pad-tablet: 80px;
  --section-pad-mobile: 56px;
 
  /* --- Motion --- */
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-slow: 550ms;
}
 
@media (max-width: 1024px) {
  :root {
    /* Font sizes are fluid (clamp) above now — only non-typographic
       tokens are adjusted at this breakpoint. */
    --gutter: 24px;
  }
}
 
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
  }
}
 
@media (max-width: 390px) {
  :root {
    /* Small-phone tier: the site previously had nothing below 767px, so a
       320–390px screen carried the same 20px side padding as a 767px one —
       proportionally heavy on the smallest devices. */
    --gutter: 16px;
  }
}