/* ==========================================================================
   NKMPV Design Token System
   ---------------------------------------------------------------------------
   Single source of truth for every visual value on the site.
   All tokens originate from the NKMPV PRD and brand guidelines.
   Other CSS files reference these variables — never hard-code raw values.
   ========================================================================== */

:root {

   /* ── Primary Palette (from the NKMPV logo) ─────────────────────────── */
   --color-forest-green: #1B5E20;
   /* Primary brand. Headings, CTAs, backgrounds */
   --color-medium-green: #2E7D32;
   /* Hover states, links, accent highlights */
   --color-steel-blue: #607D8B;
   /* Subheadings, card borders, icons */
   --color-slate-gray: #37474F;
   /* Body text, strong readability */
   --color-cyan: #1B5E20;
   /* Replaced with forest green */
   --color-cyan-text: #2E7D32;
   /* Replaced with medium green */
   --color-aqua-glow: #E8F5E9;
   /* Replaced with soft green highlight */
   --color-charcoal: #1B5E20;
   /* Replaced with deep forest green for hero/footer */

   /* ── Supporting Palette (tints & neutrals) ──────────────────────────── */
   --color-off-white: #F4F6F8;
   /* Professional crisp backgrounds */
   --color-light-cyan: #ECEFF1;
   /* Replaced with crisp gray highlight */
   --color-cloud-gray: #CFD8DC;
   /* Dividers, table borders, separators */
   --color-mist: #78909C;
   /* Muted text, placeholders, captions */
   --color-white: #FFFFFF;
   /* Cards, sections, overlays */

   /* ── Typography — Font Families ─────────────────────────────────────── */
   --font-heading: 'DM Serif Display', Georgia, serif;
   --font-body: 'IBM Plex Sans', -apple-system, sans-serif;
   --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

   /* ── Typography — Type Scale ────────────────────────────────────────── */
   --text-hero: clamp(3rem, 5vw, 4.5rem);
   /* 48-72px  Hero headlines */
   --text-h1: clamp(2.5rem, 4vw, 3rem);
   /* 40-48px  Section H1 */
   --text-h2: clamp(1.75rem, 3vw, 2rem);
   /* 28-32px  Sub-heading H2 */
   --text-h3: clamp(1.25rem, 2vw, 1.5rem);
   /* 20-24px  Card title H3 */
   --text-body: clamp(1rem, 1.5vw, 1.125rem);
   /* 16-18px  Body text */
   --text-caption: clamp(0.8125rem, 1vw, 0.875rem);
   /* 13-14px  Caption / meta */
   --text-button: clamp(0.875rem, 1.2vw, 1rem);
   /* 14-16px  Button text */
   --text-nav: clamp(0.9375rem, 1.2vw, 1rem);
   /* 15-16px  Nav links */
   --text-badge: clamp(0.75rem, 1vw, 0.8125rem);
   /* 12-13px  Badge / tag */

   /* ── Typography — Font Weights ──────────────────────────────────────── */
   --weight-regular: 400;
   --weight-medium: 500;
   --weight-semibold: 600;

   /* ── Typography — Line Heights ──────────────────────────────────────── */
   --leading-tight: 1.2;
   /* Headings */
   --leading-normal: 1.6;
   /* Body text */
   --leading-relaxed: 1.8;
   /* Long-form reading */

   /* ── Spacing (8 px base grid) ───────────────────────────────────────── */
   --space-1: 0.25rem;
   /*   4px */
   --space-2: 0.5rem;
   /*   8px */
   --space-3: 0.75rem;
   /*  12px */
   --space-4: 1rem;
   /*  16px */
   --space-5: 1.5rem;
   /*  24px */
   --space-6: 2rem;
   /*  32px */
   --space-7: 3rem;
   /*  48px */
   --space-8: 4rem;
   /*  64px */
   --space-9: 6rem;
   /*  96px */
   --space-10: 8rem;
   /* 128px */

   /* ── Layout ─────────────────────────────────────────────────────────── */
   --max-width: 1400px;
   /* Site max width */
   --content-width: 1200px;
   /* Content container */
   --reading-width: 720px;
   /* Blog post max */
   --header-height: 80px;
   /* Default header */
   --header-height-scrolled: 60px;
   /* Compressed header on scroll */
   --border-radius-sm: 4px;
   --border-radius-md: 8px;
   --border-radius-lg: 12px;
   --border-radius-full: 9999px;

   /* ── Shadows ────────────────────────────────────────────────────────── */
   --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
   --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12);
   --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.06);
   --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.12);

   /* ── Transitions ────────────────────────────────────────────────────── */
   --transition-fast: 200ms ease-out;
   --transition-base: 300ms ease-out;
   --transition-slow: 500ms ease-out;

   /* ── Z-Index Scale ──────────────────────────────────────────────────── */
   --z-base: 1;
   --z-dropdown: 100;
   --z-sticky: 200;
   --z-header: 300;
   --z-overlay: 400;
   --z-modal: 500;

   /* ── Breakpoint Reference (for media queries in other CSS files) ─────
     Mobile:   < 640px   (1 column)
     Tablet:   640-1024px (2 columns)
     Desktop:  1024-1440px (3-4 columns)
     Wide:     > 1440px   (max-width 1400px)
     ────────────────────────────────────────────────────────────────────── */
}