/* ============================================================
   NMOI design tokens — shared by the public site and the portal.
   Every color, size and radius lives here; site.css and portal.css only use var(--…).
   ============================================================ */

@font-face {
  font-family: 'Inter';
  src: url("../fonts/inter-var.e08be6d5d433.woff2") format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("../fonts/fraunces-var.eb2486760f75.woff2") format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url("../fonts/fraunces-var-italic.701ae03b5183.woff2") format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Brand */
  --ink:        #16313d;   /* body text, portal sidebar — 12.7:1 on paper */
  --navy:       #2a5265;   /* headings, links, portal primary — 7.8:1 */
  --navy-dark:  #1d3f4f;
  --coral:      #c8402a;   /* public primary, Find help — white text 5.0:1 */
  --coral-dark: #a8321e;
  --sage:       #6ca1a8;   /* decoration only, never text on white */
  --sage-50:    #eef5f5;
  --sage-100:   #dcebec;

  /* Surfaces and text */
  --paper:      #faf6f0;   /* public background */
  --canvas:     #f6f8f8;   /* portal background */
  --surface:    #ffffff;
  --surface-2:  #f1f4f5;
  --text:       var(--ink);
  --muted:      #5d6b70;   /* ≥ 5.1:1 on paper and white */
  --line:       #e3e9ea;
  --line-warm:  #e7dfd3;
  --on-dark:    #ffffff;
  --on-dark-muted: #cfdcdf;

  /* Status: text / background pairs (all ≥ 5.3:1) */
  --red:        #a8321e;  --red-bg:   #fdecea;
  --amber:      #8a5a00;  --amber-bg: #fdf2dc;
  --green:      #1e6b46;  --green-bg: #e6f3ec;
  --blue:       #1f5f8b;  --blue-bg:  #e7f0f7;

  /* Type */
  --font-sans:  'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --fs-xs: 0.8125rem;  /* 13px */
  --fs-sm: 0.875rem;   /* 14px */
  --fs-md: 1rem;       /* 16px */
  --fs-lg: 1.125rem;   /* 18px */
  --fs-xl: 1.375rem;   /* 22px */
  --fs-2xl: 1.75rem;   /* 28px */

  /* Spacing (4px scale) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 80px;

  /* Shape and depth */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(22, 49, 61, 0.06), 0 1px 3px rgba(22, 49, 61, 0.08);
  --shadow-2: 0 8px 24px rgba(22, 49, 61, 0.12), 0 2px 6px rgba(22, 49, 61, 0.06);

  /* Interaction */
  --focus: 3px solid var(--coral);
  --tap: 44px;
  --ease: 150ms ease;
}

/* Dark theme — portal only (the public site never sets data-theme and stays light). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink:        #0d1f27;
  --navy:       #8cc3cf;
  --navy-dark:  #a9d4dd;
  --coral:      #f08a73;
  --coral-dark: #f5a593;
  --sage-50:    #17303a;
  --sage-100:   #1d3a45;
  --canvas:     #0f1c22;
  --surface:    #16262d;
  --surface-2:  #1c2f37;
  --text:       #e4edef;
  --muted:      #a3b4b9;
  --line:       #2a3e46;
  --red:        #ffab9c;  --red-bg:   #3a1c18;
  --amber:      #f2c46d;  --amber-bg: #33280f;
  --green:      #8fd5ad;  --green-bg: #12301f;
  --blue:       #9cc8ec;  --blue-bg:  #142a3b;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    color-scheme: dark;
    --ink:        #0d1f27;
    --navy:       #8cc3cf;
    --navy-dark:  #a9d4dd;
    --coral:      #f08a73;
    --coral-dark: #f5a593;
    --sage-50:    #17303a;
    --sage-100:   #1d3a45;
    --canvas:     #0f1c22;
    --surface:    #16262d;
    --surface-2:  #1c2f37;
    --text:       #e4edef;
    --muted:      #a3b4b9;
    --line:       #2a3e46;
    --red:        #ffab9c;  --red-bg:   #3a1c18;
    --amber:      #f2c46d;  --amber-bg: #33280f;
    --green:      #8fd5ad;  --green-bg: #12301f;
    --blue:       #9cc8ec;  --blue-bg:  #142a3b;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.5);
  }
}

/* Shared base behaviour */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
img, svg, video { max-width: 100%; height: auto; }
:focus-visible { outline: var(--focus); outline-offset: 2px; }
.visually-hidden {
  position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--s-4); top: -100px; z-index: 1000;
  background: var(--surface); color: var(--text); padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm); box-shadow: var(--shadow-2); font-weight: 600;
}
.skip-link:focus { top: var(--s-3); }
.num, .tabular { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}