/* ============================================================
   Numerix Design System — CSS custom properties
   Source: Numerix Brand Guidelines V3 (April 29, 2024) — authoritative.
   Fonts (Google Fonts): Outfit (primary), Hedvig Letters Serif (secondary).
   MS/email fallbacks: Arial (Outfit), PT Serif (Hedvig Letters Serif).
   @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700&family=Hedvig+Letters+Serif&display=swap');
   ============================================================ */

:root {
  /* ---- Primary brand ---- */
  --nmx-new-blue:  #0000FF;
  --nmx-midnight:  #000028;

  /* ---- Secondary brand (use sparingly) ---- */
  --nmx-sky:   #00C7F2;
  --nmx-slate: #8080FF;
  --nmx-lime:  #9EE446;
  --nmx-azure: #318CE9;

  /* ---- Tertiary brand (supplementary only) ---- */
  --nmx-cyprus:    #004238;
  --nmx-turquoise: #2DDBC0;
  --nmx-sun:       #FFB404;

  /* ---- Base ---- */
  --nmx-white: #FFFFFF;
  --nmx-black: #000000;

  /* ---- Ink ---- */
  --nmx-ink:         #000028;  /* Midnight */
  --nmx-ink-inverse: #FFFFFF;

  /* ---- Supplementary UI neutrals (NOT brand colors) ---- */
  --nmx-n-50:  #F5F6FA;
  --nmx-n-100: #E8EAF2;
  --nmx-n-200: #CED2E0;
  --nmx-n-300: #A8AEC4;
  --nmx-n-400: #7A8099;
  --nmx-n-500: #565C73;
  --nmx-n-600: #3A3F52;
  --nmx-n-700: #23273A;
  --nmx-n-800: #12152A;

  /* ---- Semantic ---- */
  --nmx-info:    #318CE9; /* Azure */
  --nmx-success: #2DDBC0; /* Turquoise */
  --nmx-warning: #FFB404; /* Sun */
  --nmx-danger:  #DC3545; /* supplementary, error only */

  /* ---- Surfaces ---- */
  --nmx-surface:        #FFFFFF;
  --nmx-surface-alt:    #F5F6FA;
  --nmx-surface-brand:  #0000FF; /* New Blue */
  --nmx-surface-dark:   #000028; /* Midnight */
  --nmx-border:         #E8EAF2;

  /* ---- Typography ---- */
  --nmx-font-primary:   "Outfit", Arial, system-ui, sans-serif;
  --nmx-font-secondary: "Hedvig Letters Serif", "PT Serif", Georgia, serif;

  --nmx-fw-light: 300;
  --nmx-fw-regular: 400;
  --nmx-fw-medium: 500;
  --nmx-fw-bold: 700;

  --nmx-lh-tight: 1.1;
  --nmx-lh-snug: 1.25;
  --nmx-lh-normal: 1.5;

  /* ---- Type scale ---- */
  --nmx-fs-caption: 0.75rem;
  --nmx-fs-small:   0.875rem;
  --nmx-fs-body:    1rem;
  --nmx-fs-h5:      1.25rem;
  --nmx-fs-h4:      1.5rem;
  --nmx-fs-h3:      1.875rem;
  --nmx-fs-h2:      2.5rem;
  --nmx-fs-h1:      3.5rem;
  --nmx-fs-display: 5rem;
  --nmx-fs-tertiary: 2rem;   /* serif */
  --nmx-fs-pullquote: 1.75rem; /* serif */

  /* ---- Spacing (4px base) ---- */
  --nmx-space-1: 0.25rem;
  --nmx-space-2: 0.5rem;
  --nmx-space-3: 0.75rem;
  --nmx-space-4: 1rem;
  --nmx-space-5: 1.5rem;
  --nmx-space-6: 2rem;
  --nmx-space-8: 3rem;
  --nmx-space-10: 4rem;
  --nmx-space-12: 6rem;
  --nmx-space-16: 8rem;

  /* ---- Radius (brand geometry is sharp — keep minimal) ---- */
  --nmx-radius-none: 0;
  --nmx-radius-sm: 3px;
  --nmx-radius-md: 6px;
  --nmx-radius-lg: 10px;
  --nmx-radius-pill: 999px;

  /* ---- Shadow (tinted with Midnight) ---- */
  --nmx-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);   /* matches numerix.com card shadow */
  --nmx-shadow-md: 0 4px 12px rgba(0, 0, 40, 0.10);
  --nmx-shadow-lg: 0 12px 32px rgba(0, 0, 40, 0.16);
  --nmx-focus-ring: 0 0 0 2px #fff, 0 0 1px 4px #3C82E6; /* Azure focus glow from site */

  /* ---- Brand gradients (extracted from numerix.com) ---- */
  --nmx-gradient-brand:  linear-gradient(304.01deg, #0000FF -71.24%, #202121 63.41%); /* button hover / hero */
  --nmx-gradient-slate:  linear-gradient(276.62deg, rgba(128,128,255,0.25) 46.97%, rgba(255,255,255,0.03) 226.64%);
  --nmx-gradient-sheen:  linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0));
  --nmx-gradient-duotone: linear-gradient(135deg, #0000FF, #ffffff); /* New Blue→White image map (per brand image system) */

  /* ---- Semantic theme roles (theme-aware — overridden by [data-theme="dark"]) ----
     Build UI against THESE, not the raw brand colors, to get dark mode for free.
     --nmx-surface / --nmx-ink / --nmx-border flip with the theme; brand colors don't. */
  --nmx-surface-elevated: #FFFFFF;            /* cards sitting above the page bg */
  --nmx-text-muted:       var(--nmx-n-500);   /* secondary text */
  --nmx-accent:           var(--nmx-new-blue);/* links, secondary buttons, eyebrow */
  --nmx-accent-hover:     var(--nmx-midnight);
  --nmx-on-accent:        #FFFFFF;            /* text/icons on an accent fill */
}

/* ============================================================
   DARK THEME — semantic role overrides
   Brand colors stay constant; surfaces, text, borders and the interactive
   accent flip. New Blue #0000FF is too dark to read on dark surfaces, so the
   accent shifts to Slate #8080FF (the brand's dark-surface blue), with Azure
   for focus. Enable explicitly with <html data-theme="dark">, or let the OS
   preference drive it (media query below).
   ============================================================ */
:root[data-theme="dark"],
[data-theme="dark"] {
  --nmx-surface:          #00001E;  /* deep Midnight page base */
  --nmx-surface-alt:      #0A0A2E;  /* alternating sections */
  --nmx-surface-elevated: #14143E;  /* cards / raised panels */
  --nmx-ink:              #FFFFFF;   /* primary text */
  --nmx-ink-inverse:      #000028;
  --nmx-text-muted:       #A8AEC4;   /* secondary text */
  --nmx-border:           #2A2A52;   /* subtle border on dark */

  --nmx-accent:           var(--nmx-slate); /* #8080FF — readable on dark */
  --nmx-accent-hover:     #A6A6FF;
  --nmx-on-accent:        #000028;

  --nmx-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --nmx-shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55);
  --nmx-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
  --nmx-focus-ring: 0 0 0 2px #00001E, 0 0 1px 4px #318CE9;

  color-scheme: dark;
}

/* Honor the OS preference unless the user has explicitly chosen light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nmx-surface:#00001E; --nmx-surface-alt:#0A0A2E; --nmx-surface-elevated:#14143E;
    --nmx-ink:#FFFFFF; --nmx-ink-inverse:#000028; --nmx-text-muted:#A8AEC4; --nmx-border:#2A2A52;
    --nmx-accent:#8080FF; --nmx-accent-hover:#A6A6FF; --nmx-on-accent:#000028;
    --nmx-shadow-sm:0 1px 2px rgba(0,0,0,.5); --nmx-shadow-md:0 6px 18px rgba(0,0,0,.55); --nmx-shadow-lg:0 16px 40px rgba(0,0,0,.6);
    --nmx-focus-ring:0 0 0 2px #00001E,0 0 1px 4px #318CE9; color-scheme:dark;
  }
}

/* ============================================================
   Base elements
   Headings use Outfit Light by default; the primary H1 uses Bold.
   ============================================================ */
body {
  transition: background-color .2s ease, color .2s ease;
  font-family: var(--nmx-font-primary);
  font-size: var(--nmx-fs-body);
  font-weight: var(--nmx-fw-light);
  line-height: var(--nmx-lh-normal);
  color: var(--nmx-ink);
  background: var(--nmx-surface);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--nmx-font-primary);
  font-weight: var(--nmx-fw-light);
  line-height: var(--nmx-lh-tight);
  color: var(--nmx-ink);
  margin: 0 0 var(--nmx-space-4);
}
h1 { font-size: var(--nmx-fs-h1); font-weight: var(--nmx-fw-bold); } /* "Heading" = Outfit Bold */
h2 { font-size: var(--nmx-fs-h2); }
h3 { font-size: var(--nmx-fs-h3); }
h4 { font-size: var(--nmx-fs-h4); }
h5 { font-size: var(--nmx-fs-h5); }

a { color: var(--nmx-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Tertiary heading & pull-quote use the serif */
.nmx-tertiary-heading {
  font-family: var(--nmx-font-secondary);
  font-weight: var(--nmx-fw-regular);
  font-size: var(--nmx-fs-tertiary);
  line-height: var(--nmx-lh-snug);
}
.nmx-pullquote {
  font-family: var(--nmx-font-secondary);
  font-weight: var(--nmx-fw-regular);
  font-size: var(--nmx-fs-pullquote);
  line-height: var(--nmx-lh-normal);
  color: var(--nmx-accent);
}

/* ============================================================
   Buttons
   ============================================================ */
.nmx-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--nmx-space-2);
  font-family: var(--nmx-font-primary);
  font-weight: var(--nmx-fw-medium);
  font-size: var(--nmx-fs-body);
  line-height: 1;
  padding: 0.875rem 1.75rem;
  border-radius: var(--nmx-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.nmx-btn--primary { background: var(--nmx-new-blue); color: var(--nmx-white); }
.nmx-btn--primary:hover { background: var(--nmx-gradient-brand); border-color: var(--nmx-new-blue); } /* blue→graphite, per site */
.nmx-btn--primary:focus-visible { outline: 2px solid var(--nmx-new-blue); outline-offset: 2px; }

.nmx-btn--secondary {
  background: transparent; color: var(--nmx-accent); border-color: var(--nmx-accent);
}
.nmx-btn--secondary:hover { background: var(--nmx-accent); color: var(--nmx-on-accent); }

.nmx-btn--on-blue { background: var(--nmx-white); color: var(--nmx-new-blue); }
.nmx-btn--on-blue:hover { background: var(--nmx-midnight); color: var(--nmx-white); }

/* ============================================================
   Card
   ============================================================ */
.nmx-card {
  background: var(--nmx-surface-elevated);
  border: 1px solid var(--nmx-border);
  border-radius: var(--nmx-radius-lg);
  box-shadow: var(--nmx-shadow-sm);
  padding: var(--nmx-space-6);
  color: var(--nmx-ink);
}

/* ============================================================
   Surface helpers
   ============================================================ */
.nmx-surface-blue { background: var(--nmx-new-blue); color: var(--nmx-white); }
.nmx-surface-midnight { background: var(--nmx-midnight); color: var(--nmx-white); }
.nmx-surface-blue h1, .nmx-surface-blue h2, .nmx-surface-blue h3,
.nmx-surface-midnight h1, .nmx-surface-midnight h2, .nmx-surface-midnight h3 { color: var(--nmx-white); }

/* Tagline lock-up text */
.nmx-tagline {
  font-family: var(--nmx-font-primary);
  font-weight: var(--nmx-fw-medium);
}

/* ============================================================
   Graphical elements (extracted / derived from numerix.com)
   ============================================================ */

/* Gradient surfaces */
.nmx-surface-gradient { background: var(--nmx-gradient-brand); color: #fff; }
.nmx-surface-gradient h1, .nmx-surface-gradient h2, .nmx-surface-gradient h3 { color: #fff; }

/* Hero/section using the abstract mesh background */
.nmx-hero-mesh {
  background: #000028 url('../assets/numerix-hero-mesh.svg') center/cover no-repeat;
  color: #fff;
}

/* Glass card — Slate glow + white sheen, soft border (signature site treatment) */
.nmx-card--glass {
  position: relative;
  background: var(--nmx-gradient-slate), rgba(255,255,255,0.02);
  border: 1px solid rgba(128,128,255,0.35);
  border-radius: var(--nmx-radius-lg);
  box-shadow: var(--nmx-shadow-md);
  padding: var(--nmx-space-6);
  color: #fff;
  overflow: hidden;
}
.nmx-card--glass::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 50%;
  background: var(--nmx-gradient-sheen); pointer-events: none;
}

/* Duotone image map — New Blue → White (per brand image system gradient maps) */
.nmx-duotone { position: relative; display: inline-block; overflow: hidden; }
.nmx-duotone > img { display: block; width: 100%; filter: grayscale(1) contrast(1.05); }
.nmx-duotone::after {
  content: ""; position: absolute; inset: 0;
  background: var(--nmx-gradient-duotone); mix-blend-mode: screen; opacity: 0.85;
}

/* Decorative trend-line / network helpers */
.nmx-trend  { display: block; width: 100%; height: auto; }
.nmx-network-overlay { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.9; pointer-events: none; }

/* Eyebrow with a leading brand tick */
.nmx-eyebrow {
  display: inline-flex; align-items: center; gap: var(--nmx-space-2);
  font-size: var(--nmx-fs-caption); text-transform: uppercase; letter-spacing: .12em;
  font-weight: var(--nmx-fw-medium); color: var(--nmx-accent);
}
.nmx-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--nmx-accent); }