/* ============================================================
   NexStratus Design System — single hand-editable stylesheet.
   Every page links this one file. No build step, no bundler.

   Sections:
     1. Webfonts (Mulish [Avenir substitute] + Nunito Sans)
     2. Color tokens (Brand Style Guide 2025 §4.2/§4.3)
     3. Typography tokens (§4.4)
     4. Spacing / radii / sizing tokens
     5. Elevation / shadow / motion tokens
     6. Base element defaults
     7. Site components (nav, footer, cards, buttons, a11y)
   ============================================================ */

/* ============================================================
   1. WEBFONTS
   Brand spec: Avenir (display/headlines) + Nunito Sans (UI).
   Avenir is a licensed typeface and cannot be shipped here, so
   it is substituted with MULISH. Replace the Mulish files in
   /assets/fonts with licensed Avenir WOFF2s to make this exact
   to brand.
   ============================================================ */
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/mulish-400.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/mulish-500.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/mulish-600.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/mulish-700.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/mulish-800.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/mulish-900.woff2") format("woff2"); }

@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/nunito-sans-400.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/nunito-sans-500.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/nunito-sans-600.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/nunito-sans-700.woff2") format("woff2"); }
@font-face { font-family: "Nunito Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/nunito-sans-800.woff2") format("woff2"); }

/* ============================================================
   2. COLOR TOKENS
   Usage ratios: 70-80% Narvik or Midnight ground · <=10% Deep Sky
   or approved secondaries as accent. Maintain WCAG AA (>=4.5:1).
   ============================================================ */
:root {
  /* ---- Primary palette (use predominantly) ---- */
  --color-deep-sky: #58BFF9;   /* signature accent - orbital blue */
  --color-midnight: #2E2E2E;   /* primary dark ground / ink */
  --color-narvik:   #F6F5F1;   /* primary light ground (warm off-white) */
  --color-hyperspace: #B9B8B5; /* neutral mid / muted text & lines */

  /* ---- Secondary accents (use sparingly for emphasis) ---- */
  --color-spectra:  #456EE2;   /* indigo */
  --color-zenith:   #45E2E0;   /* cyan */
  --color-borealis: #4DFCB8;   /* mint (positive) */
  --color-lumen:    #DFE668;   /* citron (attention) */

  /* ---- Deep Sky tint/shade ramp (derived, for states & charts) ---- */
  --deep-sky-50:  #EBF7FE;
  --deep-sky-100: #D2EEFE;
  --deep-sky-200: #A9DEFC;
  --deep-sky-300: #80CEFB;
  --deep-sky-400: #58BFF9;  /* = Deep Sky */
  --deep-sky-500: #2BA9F2;
  --deep-sky-600: #1488D4;
  --deep-sky-700: #106BA6;
  --deep-sky-800: #0E5680;

  /* ---- Neutral ramp (Narvik -> Midnight, warm-cool balanced) ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F5F1;  /* = Narvik */
  --neutral-100: #ECEBE6;
  --neutral-200: #DEDDD7;
  --neutral-300: #C8C7C2;
  --neutral-400: #B9B8B5;  /* = Hyperspace */
  --neutral-500: #8E8D8A;
  --neutral-600: #6A6A67;
  --neutral-700: #4A4A48;
  --neutral-800: #353534;
  --neutral-900: #2E2E2E;  /* = Midnight */
  --neutral-950: #1C1C1C;

  /* ---- Semantic status (mapped to brand secondaries) ---- */
  --color-success: #1FA971;            /* darkened Borealis for AA on light */
  --color-success-soft: var(--color-borealis);
  --color-info: var(--color-deep-sky);
  --color-attention: #8A8B1E;          /* darkened Lumen for AA on light */
  --color-attention-soft: var(--color-lumen);
  --color-danger: #D7472E;
  --color-danger-soft: #F5C7BE;

  /* ============ Semantic aliases (use these in UI) ============ */
  /* Surfaces */
  --surface-page:        var(--color-narvik);
  --surface-card:        var(--neutral-0);
  --surface-sunken:      var(--neutral-100);
  --surface-inverse:     var(--color-midnight);
  --surface-inverse-2:   var(--neutral-800);

  /* Text */
  --text-strong:    var(--color-midnight);
  --text-body:      var(--neutral-700);
  --text-muted:     var(--neutral-500);
  --text-on-dark:   var(--color-narvik);
  --text-on-dark-muted: var(--color-hyperspace);
  --text-accent:    var(--deep-sky-700);
  --text-link:      var(--deep-sky-700);

  /* Borders & lines */
  --border-subtle:  var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);
  --border-inverse: rgba(246,245,241,0.14);

  /* Interactive (Deep Sky primary) */
  --action-primary:        var(--color-deep-sky);
  --action-primary-hover:  var(--deep-sky-500);
  --action-primary-active: var(--deep-sky-600);
  --action-on-primary:     var(--color-midnight);  /* dark ink on bright blue */

  /* Focus ring */
  --focus-ring: var(--deep-sky-500);
}

/* ============================================================
   3. TYPOGRAPHY TOKENS  (Brand Style Guide 2025, §4.4)
   Type scale: H1 40-48 · H2 28-36 · H3 20-24 · Body 14-16 · Caption 12-13
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: "Mulish", "Avenir Next", "Avenir", system-ui, sans-serif;
  --font-body:    "Mulish", "Avenir Next", "Avenir", system-ui, sans-serif;
  --font-ui:      "Nunito Sans", "Mulish", system-ui, sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;  /* Book */
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-heavy:    800;
  --weight-black:    900;  /* headline display */

  /* ---- Fluid display / heading scale (px) ---- */
  --text-display:  clamp(2.75rem, 5vw, 4rem); /* hero, 44-64 */
  --text-h1:       3rem;     /* 48 */
  --text-h2:       2.25rem;  /* 36 */
  --text-h3:       1.5rem;   /* 24 */
  --text-h4:       1.25rem;  /* 20 */
  --text-lg:       1.125rem; /* 18 lead */
  --text-base:     1rem;     /* 16 body */
  --text-sm:       0.875rem; /* 14 small body / UI */
  --text-xs:       0.8125rem;/* 13 caption */
  --text-2xs:      0.75rem;  /* 12 micro / overline */

  /* ---- Line heights ---- */
  --leading-tight:   1.08;  /* display */
  --leading-snug:    1.2;   /* headings */
  --leading-normal:  1.5;   /* body */
  --leading-relaxed: 1.65;  /* long-form */

  /* ---- Letter spacing ---- */
  --tracking-tight:   -0.02em;  /* large display */
  --tracking-snug:    -0.01em;  /* headings */
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-overline: 0.14em;  /* uppercase eyebrows / overlines */
}

/* ============================================================
   4. SPACING, RADII, SIZING TOKENS
   8pt-based spatial system with a 4pt half-step for dense UI.
   ============================================================ */
:root {
  /* ---- Spacing scale (8pt base, 4pt half-step) ---- */
  --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.5rem;   /* 24 */
  --space-6:   2rem;     /* 32 */
  --space-7:   2.5rem;   /* 40 */
  --space-8:   3rem;     /* 48 */
  --space-9:   4rem;     /* 64 */
  --space-10:  5rem;     /* 80 */
  --space-12:  6rem;     /* 96 */
  --space-16:  8rem;     /* 128 */

  /* ---- Radii ---- */
  --radius-xs:   3px;
  --radius-sm:   6px;
  --radius-md:   10px;   /* default card / control */
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ---- Layout ---- */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1100px;
  --container-xl:  1280px;
  --gutter:        var(--space-5);

  /* ---- Control sizing ---- */
  --control-h-sm: 32px;
  --control-h-md: 40px;
  --control-h-lg: 48px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;
  --focus-width: 3px;
}

/* ============================================================
   5. ELEVATION, SHADOW & MOTION TOKENS
   Restrained, precise. The brand reads as engineered, not glossy.
   ============================================================ */
:root {
  /* ---- Shadows (cool, low-spread) ---- */
  --shadow-xs: 0 1px 2px rgba(28,28,28,0.06);
  --shadow-sm: 0 1px 2px rgba(28,28,28,0.06), 0 1px 3px rgba(28,28,28,0.08);
  --shadow-md: 0 2px 4px rgba(28,28,28,0.05), 0 6px 16px rgba(28,28,28,0.10);
  --shadow-lg: 0 8px 24px rgba(28,28,28,0.12), 0 2px 6px rgba(28,28,28,0.06);
  --shadow-xl: 0 24px 60px rgba(28,28,28,0.18);

  /* Deep Sky glow - for primary focus / active orbital accents */
  --glow-deep-sky: 0 0 0 4px rgba(88,191,249,0.22);
  --glow-deep-sky-strong: 0 0 24px rgba(88,191,249,0.45);

  /* Inset / pressed */
  --shadow-inset: inset 0 1px 2px rgba(28,28,28,0.10);

  /* Ring used for focus-visible */
  --ring-focus: 0 0 0 var(--focus-width, 3px) rgba(43,169,242,0.45);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   320ms;

  /* ---- Z-index ---- */
  --z-base: 1;
  --z-sticky: 100;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
}

/* ============================================================
   6. BASE ELEMENT DEFAULTS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

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

/* ---- Headings: display family, heavy, tight ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); font-weight: var(--weight-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-heavy); }
h3 { font-size: var(--text-h3); font-weight: var(--weight-bold); }
h4 { font-size: var(--text-h4); font-weight: var(--weight-bold); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }

small { font-size: var(--text-sm); }

code, pre, kbd { font-family: var(--font-mono); }

strong, b { font-weight: var(--weight-bold); color: var(--text-strong); }

hr { border: 0; border-top: var(--border-width) solid var(--border-subtle); margin: var(--space-6) 0; }

::selection { background: rgba(88,191,249,0.30); }

img { max-width: 100%; }

:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }

/* Overline / eyebrow utility (used widely in brand copy) */
.nx-overline {
  font-family: var(--font-ui);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
  color: var(--text-accent);
}

/* ============================================================
   7. SITE COMPONENTS
   ============================================================ */
.nx-link { font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--color-narvik); opacity: 0.82; cursor: pointer; transition: opacity .16s, color .16s; text-decoration: none; }
.nx-link:hover { opacity: 1; text-decoration: none; }
.nx-link[data-active="true"] { color: var(--color-deep-sky); opacity: 1; }

.nx-priv-link { font-family: var(--font-ui); font-size: 12px; color: var(--color-narvik); opacity: 0.72; cursor: pointer; transition: opacity .16s; text-decoration: none; }
.nx-priv-link:hover { opacity: 1; text-decoration: none; }

.nx-foot-link { font-family: var(--font-ui); font-size: 14px; color: var(--color-narvik); opacity: 0.72; cursor: pointer; transition: opacity .16s; text-decoration: none; }
.nx-foot-link:hover { opacity: 1; text-decoration: none; }

.nx-uc-card { transition: box-shadow .2s var(--ease-standard), border-color .2s var(--ease-standard), transform .2s var(--ease-standard); text-decoration: none; }
.nx-uc-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); transform: translateY(-2px); text-decoration: none; }

/* Orbital motion - respects reduced-motion preference */
@keyframes nx-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nx-orbit { animation: none !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

/* Skip link - keyboard users */
.nx-skip { position: absolute; left: 8px; top: -64px; z-index: 1000; background: var(--color-deep-sky); color: #11304e; font-family: var(--font-ui); font-weight: 800; font-size: 14px; padding: 10px 18px; border-radius: 0 0 8px 8px; text-decoration: none; transition: top .15s ease; }
.nx-skip:focus { top: 0; }

/* Keyboard-only focus ring (Deep Sky), suppressed for pointer/mouse */
.nx-link:focus-visible,
.nx-foot-link:focus-visible,
.nx-uc-card:focus-visible,
.nx-btn:focus-visible,
[role="button"]:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible { outline: 2px solid var(--color-deep-sky); outline-offset: 3px; border-radius: 4px; box-shadow: none; }
:focus:not(:focus-visible) { outline: none; }
#nx-main:focus { outline: none; }

/* ---- Button (faithful to design-system Button.jsx) ---- */
.nx-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h-md);
  padding: 0 18px;
  width: auto;
  font-family: var(--font-ui);
  font-weight: var(--weight-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.01em;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
}
.nx-btn:hover { text-decoration: none; }
.nx-btn--sm { height: var(--control-h-sm); padding: 0 14px; font-size: var(--text-sm); }
.nx-btn--lg { height: var(--control-h-lg); padding: 0 24px; font-size: var(--text-base); }
.nx-btn--full { width: 100%; }

.nx-btn--primary { background: var(--action-primary); color: var(--action-on-primary); }
.nx-btn--primary:hover { background: var(--action-primary-hover); }
.nx-btn--primary:active { background: var(--action-primary-active); }

.nx-btn--secondary { background: var(--surface-card); color: var(--text-strong); border-color: var(--border-default); }
.nx-btn--secondary:hover { background: var(--surface-sunken); }
.nx-btn--secondary:active { background: var(--neutral-200); }

.nx-btn--ghost { background: transparent; color: var(--text-strong); }
.nx-btn--ghost:hover { background: var(--surface-sunken); }

.nx-btn--inverse { background: var(--color-narvik); color: var(--color-midnight); }
.nx-btn--inverse:hover { background: #ffffff; }

/* ---- Form fields (faithful to design-system Input.jsx) ---- */
.nx-field { display: flex; flex-direction: column; gap: var(--space-2); }
.nx-field label { font-family: var(--font-ui); font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-strong); }
.nx-input,
.nx-select,
.nx-textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  color: var(--text-strong);
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard);
}
.nx-input, .nx-select { height: var(--control-h-md); padding: 0 14px; }
.nx-select { cursor: pointer; }
.nx-textarea { padding: 12px 14px; resize: vertical; }
.nx-input:focus,
.nx-select:focus,
.nx-textarea:focus { border-color: var(--color-deep-sky); box-shadow: var(--glow-deep-sky); }
.nx-field .nx-hint { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--text-muted); }
.nx-field .nx-error { font-family: var(--font-ui); font-size: var(--text-xs); color: var(--color-danger); }
.nx-input--error { border-color: var(--color-danger); }

/* ---- Header / footer shells ---- */
.nx-header { position: sticky; top: 0; z-index: 100; background: rgba(46,46,46,0.86); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-inverse); }
.nx-header-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; height: 70px; display: flex; align-items: center; gap: 36px; }
.nx-header nav { display: flex; gap: 26px; margin-left: 8px; }

/* Responsive: stack the hero/contact grids on small screens */
@media (max-width: 860px) {
  .nx-grid-2 { grid-template-columns: 1fr !important; }
  .nx-header-inner { gap: 18px; overflow-x: auto; }
}