/*
 * NMF Digital — Flat design system (service pages)
 * Scoped under .nmf-flat so it never affects the front page, header, or footer.
 */
/* ==========================================================================
   NMF Digital — Flat Design System
   Global entry point. Consumers link THIS file only.
   Keep this file as an @import list — no rules inline.
   ========================================================================== */
/* NMF Digital — Webfonts (Flat Edition)
   Display: Archivo — now used at regular (400) weight for a quieter, corporate register
   Body:    Manrope
   Mono:    JetBrains Mono
   NOTE: served from Google Fonts CDN. Swap to self-hosted binaries if offline use is required. */
/* ==========================================================================
   NMF Digital — Color tokens (Flat Edition)
   A deliberately restrained 3-color system: signature blue, white, black.
   No gradients. Replaces the earlier magenta→violet→blue spectrum system —
   kept the same variable names for drop-in component compatibility.
   ========================================================================== */
.nmf-flat {
  /* --- Brand (single accent, no spectrum) --- */
  --nmf-pink:      #ffffff;   /* accent-on-dark (was hot pink) */
  --nmf-magenta:   #0053b7;   /* SIGNATURE brand color */
  --nmf-fuchsia:   #0053b7;
  --nmf-violet:    #0053b7;
  --nmf-blue:      #0053b7;
  --nmf-indigo:    #0053b7;

  /* --- "Magenta" ramp — now blue tints/solid (kept name for compatibility) --- */
  --magenta-50:  rgba(0,83,183,0.06);
  --magenta-100: rgba(0,83,183,0.10);
  --magenta-200: rgba(0,83,183,0.18);
  --magenta-300: rgba(0,83,183,0.35);
  --magenta-400: rgba(0,83,183,0.55);
  --magenta-500: #0053b7;
  --magenta-600: #0053b7;
  --magenta-700: #003d87;
  --magenta-800: #002a5c;
  --magenta-900: #001733;

  /* --- Violet / Blue ramps — folded into the single accent --- */
  --violet-100: rgba(0,83,183,0.06);
  --violet-300: rgba(0,83,183,0.35);
  --violet-500: #0053b7;
  --violet-700: #0053b7;
  --violet-900: #001733;

  --blue-100: rgba(0,83,183,0.06);
  --blue-300: rgba(0,83,183,0.35);
  --blue-500: #0053b7;
  --blue-700: #0053b7;
  --blue-900: #001733;

  /* --- Darks (flat black, was petal-macro plum) --- */
  --plum-900: #000000;
  --plum-800: #000000;
  --plum-700: #000000;
  --plum-600: #000000;

  /* --- Neutrals — true grayscale (flat system: no warm/cool tint) --- */
  --white:       #ffffff;
  --neutral-50:  #ffffff;
  --neutral-100: #f5f5f5;
  --neutral-200: rgba(255,255,255,0.92); /* on-dark text tint */
  --neutral-300: rgba(255,255,255,0.78); /* on-dark text tint */
  --neutral-400: rgba(255,255,255,0.64); /* on-dark text tint */
  --neutral-500: rgba(255,255,255,0.50); /* on-dark text tint */
  --neutral-600: rgba(0,0,0,0.55);
  --neutral-700: rgba(0,0,0,0.72);
  --neutral-800: rgba(0,0,0,0.85);
  --neutral-900: #000000;

  /* --- Semantic feedback (functional colors, unrelated to brand — unchanged) --- */
  --success-500: #18A971;
  --success-50:  #E6F6EF;
  --warning-500: #E8920C;
  --warning-50:  #FCF1DD;
  --danger-500:  #E5342F;
  --danger-50:   #FBE6E5;
  --info-500:    var(--blue-500);
  --info-50:     var(--blue-100);

  /* ====================================================================
     SEMANTIC ALIASES — reach for these in product UI, not the raw ramps
     ==================================================================== */
  --color-brand:           var(--nmf-magenta);
  --color-brand-strong:    var(--magenta-700);
  --color-accent:          var(--nmf-blue);

  --text-strong:           #000000;
  --text-body:             rgba(0,0,0,0.72);
  --text-muted:            rgba(0,0,0,0.50);
  --text-on-brand:         #ffffff;
  --text-on-dark:          #ffffff;
  --text-link:             #0053b7;

  --surface-page:          #ffffff;
  --surface-card:          #ffffff;
  --surface-sunken:        #ffffff;
  --surface-inverse:       #000000;
  --surface-brand:         #0053b7;

  --border-subtle:         rgba(0,0,0,0.10);
  --border-default:        rgba(0,0,0,0.18);
  --border-strong:         rgba(0,0,0,0.30);
  --border-brand:          #0053b7;

  --focus-ring:            rgba(0,83,183,0.35);

  /* ====================================================================
     "GRADIENTS" — flat fills. Names kept for drop-in compatibility with
     components authored against the earlier gradient system.
     ==================================================================== */
  --gradient-brand:      #0053b7; /* @kind color */
  --gradient-brand-soft: #0053b7; /* @kind color */
  --gradient-spectrum:   #0053b7; /* @kind color */
  --gradient-ink:        #000000; /* @kind color */
  --gradient-glow:       none;    /* @kind color */
}

/* ==========================================================================
   NMF Digital — Typography tokens (Flat Edition)
   Archivo (display) · Manrope (body) · JetBrains Mono (data/code)
   Headings now sit at a light/regular weight — a quieter, more corporate
   register than the original heavy-black display treatment.
   ========================================================================== */
.nmf-flat {
  --font-display: 'Archivo', 'Arial Narrow', sans-serif;
  --font-body:    'Manrope', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* Weights */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extrabold:800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* Fluid type scale (1.250 major-third, clamps for responsive display) */
  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.875rem;  /* 14 */
  --text-base: 1rem;      /* 16 */
  --text-md:   1.125rem;  /* 18 */
  --text-lg:   1.375rem;  /* 22 */
  --text-xl:   1.75rem;   /* 28 */
  --text-2xl:  2.25rem;   /* 36 */
  --text-3xl:  clamp(2.5rem, calc(1.8rem + 3.2vw), 3.5rem); /* @kind font */
  --text-4xl:  clamp(3.25rem, calc(2.2rem + 5vw), 5rem); /* @kind font */
  --text-5xl:  clamp(4rem, calc(2.4rem + 8vw), 7.5rem); /* @kind font */

  /* Line heights */
  --leading-none:    1; /* @kind font */
  --leading-tight:   1.08; /* @kind font */
  --leading-snug:    1.25; /* @kind font */
  --leading-normal:  1.55; /* @kind font */
  --leading-relaxed: 1.7; /* @kind font */

  /* Letter spacing — display runs tight, eyebrows run wide */
  --tracking-tighter: -0.03em; /* @kind font */
  --tracking-tight:   -0.015em; /* @kind font */
  --tracking-normal:  0; /* @kind font */
  --tracking-wide:    0.08em; /* @kind font */
  --tracking-eyebrow: 0.18em; /* @kind font */

  /* Semantic roles — display/headings now REGULAR weight (flat/corporate) */
  --display-family:  var(--font-display);
  --display-weight:  var(--fw-regular);
  --display-tracking:var(--tracking-tight);
  --heading-family:  var(--font-display);
  --heading-weight:  var(--fw-regular);
  --body-family:     var(--font-body);
  --eyebrow-family:  var(--font-mono);
  --eyebrow-tracking:var(--tracking-eyebrow);
}

/* ==========================================================================
   NMF Digital — Spacing & layout tokens (4px base grid)
   ========================================================================== */
.nmf-flat {
  --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-10:  4rem;     /* 64 */
  --space-12:  5rem;     /* 80 */
  --space-16:  8rem;     /* 128 */

  /* Layout */
  --container-max:   1200px;
  --container-wide:  1440px;
  --gutter:          var(--space-5);
  --section-y:       clamp(4rem, calc(2rem + 8vw), 8rem); /* @kind spacing */
}

/* ==========================================================================
   NMF Digital — Effects: radii, borders, shadows, motion (Flat Edition)
   Shadows are pure black-tinted (never brand-tinted) except the CTA glow,
   which uses the signature blue at low opacity. No blur/gradient decoration.
   ========================================================================== */
.nmf-flat {
  /* Corner radii — generous, friendly; pills for actions */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-2xl:  40px;
  --radius-pill: 999px;

  /* Borders */
  --border-width:      1px; /* @kind spacing */
  --border-width-thick:2px; /* @kind spacing */
  --border-hairline:   1px solid var(--border-subtle);

  /* Elevation — flat black shadows, no color tint */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.06);
  --shadow-sm:  0 2px 8px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 20px rgba(0,0,0,0.08);
  --shadow-lg:  0 16px 40px rgba(0,0,0,0.10);
  --shadow-xl:  0 28px 64px rgba(0,0,0,0.16);
  /* Brand glow — reserved for primary CTAs, uses signature blue */
  --shadow-brand:    0 8px 20px rgba(0,83,183,0.22);
  --shadow-brand-lg: 0 14px 36px rgba(0,83,183,0.30);

  /* Inner shadow for inputs / sunken wells */
  --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.08);

  /* Motion — quick, confident; gentle overshoot on entrances */
  --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:   120ms; /* @kind other */
  --dur-base:   200ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* Blur for glass surfaces (sticky nav) */
  --blur-glass: blur(16px); /* @kind other */
}

/* ==========================================================================
   NMF Digital — Base element defaults (lightweight reset + typographic base)
   ========================================================================== */
.nmf-flat *, .nmf-flat *::before, .nmf-flat *::after { box-sizing: border-box; }

.nmf-flat {
  margin: 0;
  font-family: var(--font-body);
  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;
}

.nmf-flat h1, .nmf-flat h2, .nmf-flat h3, .nmf-flat h4 {
  font-family: var(--heading-family);
  font-weight: var(--heading-weight);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

.nmf-flat p { margin: 0 0 1em; text-wrap: pretty; }

.nmf-flat a { color: var(--text-link); text-decoration: none; }
.nmf-flat a:hover { text-decoration: underline; }

/* Utility: brand fill as text color (flat — no gradient text-clip in this edition) */
.nmf-flat .nmf-gradient-text { color: var(--nmf-magenta); }

/* Utility: monospace eyebrow label */
.nmf-flat .nmf-eyebrow {
  font-family: var(--eyebrow-family);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--eyebrow-tracking);
  text-transform: uppercase;
  color: var(--color-brand);
}

.nmf-flat ::selection { background: var(--magenta-200); color: #000; }