/* ============================================================
   variables.css
   CSS custom properties (design tokens) used site-wide, plus
   the global box-sizing reset, html/body base styles, and
   the page show/hide utility used by the SPA navigation.
   ============================================================ */

/* --- Global reset --- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- Design tokens --- */
:root {
  --navy:   #0A1628;
  --navy2:  #112240;
  --blue:   #00AEFF;
  --blue2:  #40CAFF;
  --light:  #F4F6FA;
  --white:  #FFFFFF;
  --text:   #0A1628;
  --muted:  #5A6A87;
  --res:    #1D9E75;   /* mining / resources accent */
  --log:    #185FA5;   /* logistics accent */
  --hos:    #993556;   /* hospitality accent */
  --border: #DDE3EF;
  --od:     #FFFFFF;                    /* on-dark text — always white */
  --od-m:   rgba(255,255,255,0.72);     /* on-dark muted */
  --od-d:   rgba(255,255,255,0.45);     /* on-dark dimmed */
}

/* --- Base --- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-size: 15px;
}

/* --- SPA page visibility --- */
.page { display: none; }
.page.active { display: block; }