/* Novaplex Design System — global entry point.
   Consumers link THIS file. Keep it a list of @imports only. */
/* Webfonts.
   Brand font is Avenir (Light / Heavy / Black). Avenir is a licensed
   typeface and was NOT supplied, so the system ships Mulish — a
   humanist-geometric Google font with metrics close to Avenir — as the
   working substitute. Replace with licensed Avenir web files when available:
   drop the .woff2 files in /assets/fonts and swap the @import for @font-face. */
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-italic-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-italic-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-italic-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic-ext.woff2") format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-normal-cyrillic.woff2") format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-normal-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Mulish';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("../fonts/mulish-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ============================================================
   COLOR TOKENS
   Source of truth: Novaplex brand-colour sheet (supplied PDF)
     Sky Blue      #00A9E1
     Midnight Blue #0A1E2C
     White         #FFFFFF
   The scales below are derived harmonically (OKLCH) around those
   two brand colours. Neutrals are cooled toward the midnight navy.
   Semantic hues (green/amber/red) are DERIVED additions — not in the
   original brand sheet — tuned to sit calmly beside the brand blue.
   ============================================================ */
:root {
  /* --- Brand primitives --- */
  --sky-blue: #00a9e1;
  --midnight-blue: #0a1e2c;
  --white: #ffffff;

  /* --- Sky-blue scale --- */
  --blue-50:  #e7f7fd;
  --blue-100: #c4ecfa;
  --blue-200: #8fdbf4;
  --blue-300: #4fc6ec;
  --blue-400: #1fb3e6;
  --blue-500: #00a9e1;  /* brand Sky Blue */
  --blue-600: #0090c4;
  --blue-700: #0076a2;
  --blue-800: #005c7e;
  --blue-900: #06455c;

  /* --- Neutral / ink scale (cool, navy-biased) --- */
  --gray-0:   #ffffff;
  --gray-50:  #f5f8fa;
  --gray-100: #eaeff3;
  --gray-200: #dae2e9;
  --gray-300: #c2ced7;
  --gray-400: #9aa8b4;
  --gray-500: #6b7b88;
  --gray-600: #4c5a66;
  --gray-700: #33414d;
  --gray-800: #1c2c38;
  --gray-900: #0a1e2c;  /* brand Midnight Blue */

  /* --- Semantic hues (derived additions) --- */
  --green-50:  #e6f6ee;
  --green-500: #1fa971;
  --green-600: #17875b;
  --amber-50:  #fdf3e2;
  --amber-500: #e8a33d;
  --amber-600: #c9842a;
  --red-50:    #fdeaea;
  --red-500:   #e5484d;
  --red-600:   #c5383c;

  /* ============================================================
     SEMANTIC ALIASES — reference these in product code.
     ============================================================ */

  /* Brand */
  --color-brand:            var(--sky-blue);
  --color-brand-hover:      var(--blue-600);
  --color-brand-active:     var(--blue-700);
  --color-brand-subtle:     var(--blue-50);
  --color-ink:              var(--midnight-blue);

  /* Text */
  --text-strong:   var(--gray-900);
  --text-body:     var(--gray-700);
  --text-muted:    var(--gray-500);
  --text-subtle:   var(--gray-400);
  --text-inverse:  var(--white);
  --text-brand:    var(--blue-700);
  --text-on-brand: var(--white);

  /* Surfaces */
  --surface-page:    var(--gray-0);
  --surface-muted:   var(--gray-50);
  --surface-card:    var(--white);
  --surface-sunken:  var(--gray-100);
  --surface-ink:     var(--midnight-blue);
  --surface-ink-2:   var(--gray-800);
  --surface-brand:   var(--sky-blue);

  /* Borders */
  --border-subtle:  var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong:  var(--gray-400);
  --border-brand:   var(--blue-500);
  --border-on-ink:  rgba(255, 255, 255, 0.14);

  /* Focus ring */
  --focus-ring: rgba(0, 169, 225, 0.4);

  /* Semantic states */
  --color-success:        var(--green-500);
  --color-success-subtle: var(--green-50);
  --color-warning:        var(--amber-500);
  --color-warning-subtle: var(--amber-50);
  --color-danger:         var(--red-500);
  --color-danger-subtle:  var(--red-50);
}

/* ============================================================
   TYPOGRAPHY TOKENS
   Brand face: Avenir (substitute: Mulish — see fonts.css).
   Headings use heavy/black weights; body uses light/regular.
   Type scale is a ~1.2 minor-third ramp on a 16px base.
   ============================================================ */
:root {
  --font-sans: "Mulish", "Avenir Next", "Avenir", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Weights (mapped to Avenir's Light / Book / Heavy / Black) */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;
  --weight-black:    900;

  /* Font sizes */
  --text-display: 3.815rem;  /* 61px */
  --text-h1:      3.052rem;  /* 49px */
  --text-h2:      2.441rem;  /* 39px */
  --text-h3:      1.953rem;  /* 31px */
  --text-h4:      1.563rem;  /* 25px */
  --text-h5:      1.25rem;   /* 20px */
  --text-h6:      1rem;      /* 16px */
  --text-lg:      1.125rem;  /* 18px */
  --text-base:    1rem;      /* 16px */
  --text-sm:      0.875rem;  /* 14px */
  --text-xs:      0.75rem;   /* 12px */

  /* Line heights */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  /* Letter spacing */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-caps:   0.12em;  /* eyebrow / all-caps labels */

  /* Semantic aliases */
  --font-display-family: var(--font-sans);
  --font-display-weight: var(--weight-black);
  --font-heading-weight: var(--weight-heavy);
  --font-body-weight:    var(--weight-regular);
}

/* ============================================================
   SPACING TOKENS — 4px base grid.
   ============================================================ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;  /* 4  */
  --space-2:  0.5rem;   /* 8  */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.25rem;  /* 20 */
  --space-6:  1.5rem;   /* 24 */
  --space-8:  2rem;     /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */

  /* Layout */
  --container-max: 1200px;
  --container-pad: var(--space-6);
  --section-gap:   var(--space-24);
}

/* ============================================================
   RADIUS TOKENS
   Novaplex chrome is lightly rounded and corporate — small radii
   on controls, medium on cards, pill only for tags/eyebrows.
   ============================================================ */
:root {
  --radius-xs:   3px;
  --radius-sm:   6px;   /* buttons, inputs */
  --radius-md:   10px;  /* cards, tiles */
  --radius-lg:   16px;  /* feature panels */
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-round: 50%;
}

/* ============================================================
   SHADOW & ELEVATION TOKENS
   Soft, cool shadows tinted with the midnight-blue ink so cards
   feel lifted rather than dropped onto grey.
   ============================================================ */
:root {
  --shadow-xs: 0 1px 2px rgba(10, 30, 44, 0.06);
  --shadow-sm: 0 1px 3px rgba(10, 30, 44, 0.08), 0 1px 2px rgba(10, 30, 44, 0.06);
  --shadow-md: 0 4px 12px rgba(10, 30, 44, 0.08), 0 2px 4px rgba(10, 30, 44, 0.05);
  --shadow-lg: 0 12px 28px rgba(10, 30, 44, 0.12), 0 4px 8px rgba(10, 30, 44, 0.06);
  --shadow-xl: 0 24px 48px rgba(10, 30, 44, 0.16);

  /* Brand-tinted glow for primary emphasis */
  --shadow-brand: 0 8px 20px rgba(0, 169, 225, 0.28);

  /* Hairline inset for sunken fields */
  --shadow-inset: inset 0 1px 2px rgba(10, 30, 44, 0.08);
}

/* ============================================================
   MOTION TOKENS
   Restrained, professional motion — short fades and lifts, no
   bounce. Hover darkens/lifts; press nudges down slightly.
   ============================================================ */
:root {
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1); /* @kind other */

  --duration-fast:   120ms; /* @kind other */
  --duration-normal: 200ms; /* @kind other */
  --duration-slow:   320ms; /* @kind other */

  --transition-base: all var(--duration-normal) var(--ease-standard); /* @kind other */
  --press-scale: 0.98; /* @kind other */
}

/* ============================================================
   BASE — light element defaults so raw HTML picks up the brand.
   Kept minimal; components own their own styling.
   ============================================================ */
:root {
  color-scheme: light;
}

body {
  font-family: var(--font-sans);
  font-weight: var(--font-body-weight);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display-family);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a {
  color: var(--text-brand);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--blue-800); }

::selection {
  background: var(--blue-100);
  color: var(--midnight-blue);
}

/* Eyebrow / all-caps label utility used across the brand */
.np-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-heavy);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-brand);
}