/* ============================================================================
   MentraNote — Design System (mentranote-ds.css)
   ----------------------------------------------------------------------------
   THE single source of truth for visual design across the marketing/auth site.

   ARCHITECTURE / LOAD ORDER  (do not reorder — later files intentionally win):
     bootstrap.min.css        vendor grid + utilities
     main.css                 purchased template theme
     mentranote.css           legacy brand layer  (being retired into this file)
     mentranote-home*.css     legacy homepage layers (being retired)
     mentranote-ds.css        ← THIS FILE: tokens + components
     mentranote-compat.css    legacy-class bridge (may use !important)

   WHY NO @layer: the vendor/template sheets are unlayered, and unlayered CSS
   always beats layered CSS in the cascade. Wrapping this file in @layer would
   make it LOSE to bootstrap/main.css. Keep it unlayered and loaded last.

   RULES FOR CONTRIBUTORS
     1. Never hardcode a colour, radius, shadow or spacing value in a page.
        Reference a token. If no token fits, add one HERE first.
     2. Every colour pair below is WCAG AA verified (see CONTRAST NOTES).
        Do not introduce a text colour without checking it.
     3. The LOGO IS OFF-LIMITS. Never recolour, filter, or restyle .logo /
        the brand mark. No token in this file targets it.

   CONTRAST NOTES (measured against #FFFFFF, not estimated)
     --mn-brand-500 #4F7FFF  3.61:1  ← IDENTITY ONLY. Fails AA for text.
                                       Use for fills-behind-large-shapes, focus
                                       rings, glows and tints. NEVER for body
                                       text or as a fill under white label text.
     --mn-brand-600 #2C62F2  5.08:1  PASS — primary button fill (white label)
     --mn-brand-700 #1A4BCF  7.12:1  PASS — links, active nav, emphasis text
     --mn-text-muted #787571 4.58:1  PASS
     --mn-text      #52504C  8.04:1  PASS
     --mn-heading   #23221F 15.91:1  PASS
     Warning uses INK-ON-AMBER: white text never reaches 4.5:1 on any usable
     amber, so --mn-warning-400 carries --mn-heading (9.27:1), not white.
   ============================================================================ */

/* ===========================================================================
   1. TOKENS
   =========================================================================== */

:root {
  /* ---- Brand ramp — anchored at 500 = #4F7FFF (existing brand colour).
          Saturation TAPERS toward the dark end; a constant-saturation ramp
          produces neon (#0041F0) which reads cheap and "generated". ---- */
  --mn-brand-50:  #EDF2FF;
  --mn-brand-100: #D9E3FF;
  --mn-brand-200: #B6CAFE;
  --mn-brand-300: #8FADFC;
  --mn-brand-400: #6A92FB;
  --mn-brand-500: #4F7FFF;  /* identity — see CONTRAST NOTES */
  --mn-brand-600: #2C62F2;  /* button fill */
  --mn-brand-700: #1A4BCF;  /* links / text */
  --mn-brand-800: #1C3F9C;  /* pressed */
  --mn-brand-900: #192F69;

  /* ---- Neutral ramp — ONE warm ramp (hue 38°).
          Replaces the previous Tailwind gray (#374151/#6b7280) + slate
          (#64748b/#1e293b) collision. Warm neutrals against the cool brand
          blue read intentional; cold slate reads like a framework default. --- */
  --mn-neutral-0:   #FFFFFF;
  --mn-neutral-25:  #FCFBFA;
  --mn-neutral-50:  #FAF8F6;
  --mn-neutral-100: #F5F3EF;
  --mn-neutral-200: #E9E7E2;
  --mn-neutral-300: #D6D2CD;
  --mn-neutral-400: #AEAAA3;
  --mn-neutral-500: #787571;
  --mn-neutral-600: #686662;
  --mn-neutral-700: #52504C;
  --mn-neutral-800: #393735;
  --mn-neutral-900: #23221F;

  /* ---- Semantics — each has a FILL (carries white) and TEXT (on white) ---- */
  --mn-success-50:  #EDFAF4;
  --mn-success-100: #D6F5E7;
  --mn-success-600: #1F7A50;   /* fill  — white label 5.31:1 */
  --mn-success-700: #1B6A45;   /* text  — on white   6.57:1 */

  --mn-warning-50:  #FDF6E7;
  --mn-warning-100: #FCEAC5;
  --mn-warning-400: #F7BC45;   /* fill  — INK label  9.27:1 */
  --mn-warning-600: #DD980E;
  --mn-warning-700: #8F6614;   /* text  — on white   6.20:1 */

  --mn-danger-50:   #FAEEED;
  --mn-danger-100:  #F5D8D6;
  --mn-danger-600:  #D63429;   /* fill  — white label 4.79:1 */
  --mn-danger-700:  #A82D24;   /* text  — on white    6.85:1 */

  --mn-info-50:     #EDF4FA;
  --mn-info-100:    #D6E5F5;
  --mn-info-600:    #2C73BA;   /* fill  — white label 4.92:1 */
  --mn-info-700:    #255C93;   /* text  — on white    6.93:1 */

  /* ---- Role tokens — PAGES SHOULD USE THESE, not the ramps above ---- */
  --mn-canvas:          var(--mn-neutral-25);
  --mn-surface:         var(--mn-neutral-0);
  --mn-surface-sunken:  var(--mn-neutral-50);
  --mn-surface-hover:   var(--mn-neutral-100);

  --mn-border-subtle:   var(--mn-neutral-100);
  --mn-border:          var(--mn-neutral-200);
  --mn-border-strong:   var(--mn-neutral-300);

  --mn-heading:         var(--mn-neutral-900);
  --mn-text:            var(--mn-neutral-700);
  --mn-text-secondary:  var(--mn-neutral-600);
  --mn-text-muted:      var(--mn-neutral-500);
  --mn-text-disabled:   var(--mn-neutral-400);
  --mn-text-inverse:    var(--mn-neutral-0);

  --mn-link:            var(--mn-brand-700);
  --mn-link-hover:      var(--mn-brand-800);

  /* ---- Typography ----
          ONE font pairing site-wide. Previously 3 different Google Fonts URLs
          shipped and Plus Jakarta Sans existed only on index/faq/platform. */
  --mn-font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mn-font-display: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mn-font-mono:    'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;

  --mn-fs-caption: 0.75rem;    /* 12 */
  --mn-fs-sm:      0.875rem;   /* 14 */
  --mn-fs-body:    1rem;       /* 16 */
  --mn-fs-lg:      1.125rem;   /* 18 */
  --mn-fs-xl:      1.375rem;   /* 22 */
  --mn-fs-2xl:     1.75rem;    /* 28 */
  --mn-fs-3xl:     2.25rem;    /* 36 */
  --mn-fs-4xl:     3rem;       /* 48 */
  --mn-fs-5xl:     3.75rem;    /* 60 */

  --mn-lh-tight:   1.15;
  --mn-lh-snug:    1.3;
  --mn-lh-normal:  1.55;
  --mn-lh-relaxed: 1.7;

  --mn-fw-regular:  400;
  --mn-fw-medium:   500;
  --mn-fw-semibold: 600;
  --mn-fw-bold:     700;

  /* Optical tightening on large type — the single clearest tell of typography
     set by a person rather than left at defaults. */
  --mn-ls-display: -0.022em;
  --mn-ls-heading: -0.013em;
  --mn-ls-body:    0;
  --mn-ls-caps:    0.06em;

  /* ---- Spacing — 4px base. Replaces ad-hoc padding across pages. ---- */
  --mn-space-1:  4px;
  --mn-space-2:  8px;
  --mn-space-3:  12px;
  --mn-space-4:  16px;
  --mn-space-5:  20px;
  --mn-space-6:  24px;
  --mn-space-8:  32px;
  --mn-space-10: 40px;
  --mn-space-12: 48px;
  --mn-space-16: 64px;
  --mn-space-20: 80px;
  --mn-space-24: 96px;

  /* ---- Radius — 5 steps + pill. Replaces the 17 ad-hoc values found in the
          audit (2/4/6/8/9/10/12/13/14/16/18/20/24/50px).
          NOTE: buttons move 50px pill → --mn-radius-md. The pill button is the
          single strongest "AI template" tell on the old site. --mn-radius-pill
          is reserved for things that ARE semantically pills: badges, avatars,
          chips, toggles. ---- */
  --mn-radius-xs:   4px;
  --mn-radius-sm:   6px;
  --mn-radius-md:   10px;
  --mn-radius-lg:   14px;
  --mn-radius-xl:   20px;
  --mn-radius-pill: 999px;

  /* ---- Elevation — 6 steps, replacing 117 unique box-shadow values.
          Two-part (contact + ambient) and tinted with warm ink rather than
          pure black; pure-black shadows are what make cards look "stuck on". */
  --mn-shadow-xs: 0 1px 2px rgba(35,34,31,.05);
  --mn-shadow-sm: 0 1px 2px rgba(35,34,31,.05), 0 2px 6px -1px rgba(35,34,31,.06);
  --mn-shadow-md: 0 2px 4px -1px rgba(35,34,31,.05), 0 6px 16px -3px rgba(35,34,31,.08);
  --mn-shadow-lg: 0 4px 8px -2px rgba(35,34,31,.05), 0 12px 32px -6px rgba(35,34,31,.10);
  --mn-shadow-xl: 0 8px 16px -4px rgba(35,34,31,.06), 0 24px 56px -10px rgba(35,34,31,.14);
  --mn-shadow-inner: inset 0 1px 2px rgba(35,34,31,.06);

  /* ---- Glow — soft, blurred, low-opacity. Communicates depth and focus.
          Built from brand-500 so the identity colour stays visible even though
          it can't carry text. Never neon: opacity caps at .42 and always
          negative-spread so it stays a halo, not a ring. ---- */
  --mn-glow-sm:  0 4px 14px -4px rgba(79,127,255,.28);
  --mn-glow:     0 8px 28px -8px rgba(79,127,255,.38);
  --mn-glow-lg:  0 14px 44px -10px rgba(79,127,255,.42);
  --mn-glow-ambient: 0 0 0 1px rgba(79,127,255,.10), 0 10px 36px -12px rgba(79,127,255,.30);

  /* ---- Focus — one ring, used everywhere, never removed without replacement */
  --mn-focus-ring:   0 0 0 3px rgba(79,127,255,.32);
  --mn-focus-offset: 2px;

  /* ---- Motion ---- */
  --mn-dur-fast: 120ms;
  --mn-dur:      180ms;
  --mn-dur-slow: 260ms;
  --mn-ease:        cubic-bezier(.2,.8,.2,1);
  --mn-ease-out:    cubic-bezier(0,0,.2,1);
  --mn-ease-in-out: cubic-bezier(.4,0,.2,1);

  /* ---- Z-index — named scale; stops the 9999 arms race ---- */
  --mn-z-base:     0;
  --mn-z-dropdown: 1000;
  --mn-z-sticky:   1020;
  --mn-z-header:   1030;
  --mn-z-backdrop: 1040;
  --mn-z-modal:    1050;
  --mn-z-popover:  1060;
  --mn-z-toast:    1070;
  --mn-z-tooltip:  1080;

  /* ---- Opacity ---- */
  --mn-opacity-disabled: .48;
  --mn-opacity-muted:    .72;

  /* ---- Layout ---- */
  --mn-container:      1200px;
  --mn-container-prose: 68ch;   /* legal pages: cap measure for readability */
}

/* ===========================================================================
   2. DARK THEME TOKENS  —  DEFINED, NOT WIRED
   ---------------------------------------------------------------------------
   Per scope decision: ship light only, but author dark now so enabling it
   later is a switch, not a rewrite. To enable:
     1. add data-theme="dark" to <html> (+ a toggle w/ localStorage)
     2. honour prefers-color-scheme
     3. QA pass — inline <style> blocks in pages must be token-ised first,
        otherwise they will not respond to this block.
   Dark is NOT simply inverted: the brand ramp shifts LIGHTER (600 fails on
   dark), and surfaces step up rather than shadows getting stronger.
   =========================================================================== */

[data-theme="dark"] {
  --mn-canvas:         #17161A;
  --mn-surface:        #1E1D22;
  --mn-surface-sunken: #17161A;
  --mn-surface-hover:  #26252B;

  --mn-border-subtle:  #26252B;
  --mn-border:         #323138;
  --mn-border-strong:  #42414A;

  --mn-heading:        #F7F6F4;
  --mn-text:           #D8D5D0;
  --mn-text-secondary: #B0ADA7;
  --mn-text-muted:     #8B8880;
  --mn-text-disabled:  #5E5B56;
  --mn-text-inverse:   #17161A;

  /* On dark, brand-600 (#2C62F2) is too dark to read — step LIGHTER. */
  --mn-link:           var(--mn-brand-300);
  --mn-link-hover:     var(--mn-brand-200);

  /* Shadows do little on dark; lean on surface steps + glow instead. */
  --mn-shadow-xs: 0 1px 2px rgba(0,0,0,.30);
  --mn-shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px -1px rgba(0,0,0,.36);
  --mn-shadow-md: 0 2px 4px -1px rgba(0,0,0,.32), 0 6px 16px -3px rgba(0,0,0,.44);
  --mn-shadow-lg: 0 4px 8px -2px rgba(0,0,0,.34), 0 12px 32px -6px rgba(0,0,0,.50);
  --mn-shadow-xl: 0 8px 16px -4px rgba(0,0,0,.38), 0 24px 56px -10px rgba(0,0,0,.58);
}

/* ===========================================================================
   3. BASE
   =========================================================================== */

.mn-ds body,
body.mn-ds {
  background: var(--mn-canvas);
}

/* ---- Focus: one visible ring everywhere. Never `outline:none` alone. ---- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: var(--mn-focus-offset);
  box-shadow: var(--mn-focus-ring);
  border-radius: var(--mn-radius-sm);
}

/* ---- Motion: honour the OS setting. Required for WCAG 2.3.3. ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Screen-reader-only utility ---- */
.mn-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Skip link ---- */
.mn-skip-link {
  position: absolute; top: -100%; left: var(--mn-space-4);
  z-index: var(--mn-z-tooltip);
  background: var(--mn-surface); color: var(--mn-link);
  padding: var(--mn-space-3) var(--mn-space-5);
  border-radius: var(--mn-radius-md);
  box-shadow: var(--mn-shadow-lg);
  font-weight: var(--mn-fw-semibold);
  transition: top var(--mn-dur) var(--mn-ease);
}
.mn-skip-link:focus { top: var(--mn-space-4); }

/* ===========================================================================
   4. TYPOGRAPHY
   =========================================================================== */

.mn-display,
.mn-h1, .mn-h2, .mn-h3, .mn-h4 {
  font-family: var(--mn-font-display);
  color: var(--mn-heading);
  font-weight: var(--mn-fw-bold);
  margin: 0 0 var(--mn-space-4);
  text-wrap: balance;          /* stops orphaned words in headings */
}
.mn-display { font-size: var(--mn-fs-5xl); line-height: var(--mn-lh-tight); letter-spacing: var(--mn-ls-display); }
.mn-h1      { font-size: var(--mn-fs-4xl); line-height: var(--mn-lh-tight); letter-spacing: var(--mn-ls-display); }
.mn-h2      { font-size: var(--mn-fs-3xl); line-height: var(--mn-lh-snug);  letter-spacing: var(--mn-ls-heading); }
.mn-h3      { font-size: var(--mn-fs-2xl); line-height: var(--mn-lh-snug);  letter-spacing: var(--mn-ls-heading); }
.mn-h4      { font-size: var(--mn-fs-xl);  line-height: var(--mn-lh-snug);  letter-spacing: var(--mn-ls-heading); }

.mn-lead {
  font-size: var(--mn-fs-lg);
  line-height: var(--mn-lh-relaxed);
  color: var(--mn-text-secondary);
  max-width: 60ch;
  margin: 0 0 var(--mn-space-6);
}
.mn-body    { font-size: var(--mn-fs-body); line-height: var(--mn-lh-normal); color: var(--mn-text); }
.mn-body-sm { font-size: var(--mn-fs-sm);   line-height: var(--mn-lh-normal); color: var(--mn-text-secondary); }
.mn-caption { font-size: var(--mn-fs-caption); line-height: var(--mn-lh-normal); color: var(--mn-text-muted); }

.mn-eyebrow {
  font-size: var(--mn-fs-caption);
  font-weight: var(--mn-fw-semibold);
  letter-spacing: var(--mn-ls-caps);
  text-transform: uppercase;
  color: var(--mn-brand-700);
  margin: 0 0 var(--mn-space-3);
}

.mn-prose { max-width: var(--mn-container-prose); line-height: var(--mn-lh-relaxed); color: var(--mn-text); }
.mn-prose h2 { margin-top: var(--mn-space-12); }
.mn-prose h3 { margin-top: var(--mn-space-8); }
.mn-prose p  { margin: 0 0 var(--mn-space-5); }
.mn-prose a  { color: var(--mn-link); text-underline-offset: 2px; }
.mn-prose a:hover { color: var(--mn-link-hover); }

/* ===========================================================================
   5. BUTTONS
   ---------------------------------------------------------------------------
   Replaces the template's `border-radius:50px !important` gradient pill.
   Tactile: 1px translate on press, ambient glow on primary only, so the
   primary action is unmistakable without shouting.
   =========================================================================== */

.mn-btn {
  --_bg: transparent;
  --_fg: var(--mn-text);
  --_bd: transparent;
  --_shadow: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mn-space-2);
  padding: var(--mn-space-3) var(--mn-space-5);
  min-height: 44px;                       /* WCAG 2.5.5 touch target */
  font-family: var(--mn-font-sans);
  font-size: var(--mn-fs-sm);
  font-weight: var(--mn-fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  color: var(--_fg);
  background: var(--_bg);
  border: 1px solid var(--_bd);
  border-radius: var(--mn-radius-md);
  box-shadow: var(--_shadow);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--mn-dur) var(--mn-ease),
    border-color var(--mn-dur) var(--mn-ease),
    box-shadow var(--mn-dur) var(--mn-ease),
    transform var(--mn-dur-fast) var(--mn-ease);
}
.mn-btn:active { transform: translateY(1px); }
.mn-btn:disabled,
.mn-btn[aria-disabled="true"] {
  opacity: var(--mn-opacity-disabled);
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — brand-600 fill (5.08:1 with white). NOT brand-500, which fails AA. */
.mn-btn--primary {
  --_bg: var(--mn-brand-600);
  --_fg: var(--mn-text-inverse);
  --_bd: var(--mn-brand-600);
  --_shadow: var(--mn-glow-sm);
}
.mn-btn--primary:hover {
  --_bg: var(--mn-brand-700);
  --_bd: var(--mn-brand-700);
  --_shadow: var(--mn-glow);
}
.mn-btn--primary:active { --_bg: var(--mn-brand-800); --_bd: var(--mn-brand-800); }

/* Secondary — complements without competing */
.mn-btn--secondary {
  --_bg: var(--mn-surface);
  --_fg: var(--mn-brand-700);
  --_bd: var(--mn-border-strong);
  --_shadow: var(--mn-shadow-xs);
}
.mn-btn--secondary:hover {
  --_bg: var(--mn-brand-50);
  --_bd: var(--mn-brand-300);
  --_shadow: var(--mn-shadow-sm);
}

/* Ghost — elegant, no chrome until touched */
.mn-btn--ghost { --_fg: var(--mn-text-secondary); }
.mn-btn--ghost:hover { --_bg: var(--mn-surface-hover); --_fg: var(--mn-heading); }

/* Danger — communicates risk */
.mn-btn--danger {
  --_bg: var(--mn-danger-600);
  --_fg: var(--mn-text-inverse);
  --_bd: var(--mn-danger-600);
}
.mn-btn--danger:hover { --_bg: var(--mn-danger-700); --_bd: var(--mn-danger-700); }

/* Sizes */
.mn-btn--sm { padding: var(--mn-space-2) var(--mn-space-4); min-height: 36px; font-size: var(--mn-fs-caption); }
.mn-btn--lg { padding: var(--mn-space-4) var(--mn-space-8); min-height: 52px; font-size: var(--mn-fs-body); }
.mn-btn--block { display: flex; width: 100%; }

/* Icons: normalised size + optical alignment */
.mn-btn i, .mn-btn svg { width: 1em; height: 1em; font-size: 1.05em; flex-shrink: 0; }

/* Loading — reserves width so the button doesn't jump */
.mn-btn--loading { color: transparent !important; pointer-events: none; position: relative; }
.mn-btn--loading::after {
  content: '';
  position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--mn-radius-pill);
  color: var(--_fg);
  animation: mn-spin .6s linear infinite;
}
@keyframes mn-spin { to { transform: rotate(360deg); } }

/* ===========================================================================
   6. FORMS
   =========================================================================== */

.mn-field { margin-bottom: var(--mn-space-5); }

.mn-label {
  display: block;
  margin-bottom: var(--mn-space-2);
  font-size: var(--mn-fs-sm);
  font-weight: var(--mn-fw-medium);
  color: var(--mn-heading);
}
/* Required marker — colour is never the only signal (WCAG 1.4.1) */
.mn-label--required::after {
  content: ' *';
  color: var(--mn-danger-700);
  font-weight: var(--mn-fw-bold);
}

.mn-input, .mn-select, .mn-textarea {
  display: block;
  width: 100%;
  padding: var(--mn-space-3) var(--mn-space-4);
  min-height: 44px;
  font-family: var(--mn-font-sans);
  font-size: var(--mn-fs-body);
  line-height: var(--mn-lh-normal);
  color: var(--mn-heading);
  background: var(--mn-surface);
  border: 1px solid var(--mn-border-strong);
  border-radius: var(--mn-radius-md);
  transition: border-color var(--mn-dur) var(--mn-ease), box-shadow var(--mn-dur) var(--mn-ease);
}
.mn-input::placeholder, .mn-textarea::placeholder { color: var(--mn-text-disabled); }
.mn-input:hover, .mn-select:hover, .mn-textarea:hover { border-color: var(--mn-neutral-400); }

/* Focused input gets the ambient glow — the prompt's "focused form inputs" cue */
.mn-input:focus, .mn-select:focus, .mn-textarea:focus {
  outline: none;
  border-color: var(--mn-brand-500);
  box-shadow: var(--mn-focus-ring);
}
.mn-input:disabled, .mn-select:disabled, .mn-textarea:disabled {
  background: var(--mn-surface-sunken);
  color: var(--mn-text-disabled);
  cursor: not-allowed;
}
.mn-textarea { min-height: 120px; resize: vertical; }

/* Validation — paired with an icon/text, never colour alone */
.mn-input--error, .mn-select--error, .mn-textarea--error { border-color: var(--mn-danger-600); }
.mn-input--error:focus { box-shadow: 0 0 0 3px rgba(214,52,41,.24); }
.mn-input--success { border-color: var(--mn-success-600); }

.mn-help  { margin-top: var(--mn-space-2); font-size: var(--mn-fs-caption); color: var(--mn-text-muted); }
.mn-error { margin-top: var(--mn-space-2); font-size: var(--mn-fs-caption); color: var(--mn-danger-700); display: flex; align-items: center; gap: var(--mn-space-1); }
.mn-ok    { margin-top: var(--mn-space-2); font-size: var(--mn-fs-caption); color: var(--mn-success-700); display: flex; align-items: center; gap: var(--mn-space-1); }

/* Checkbox / radio — custom but keyboard-native */
.mn-check { display: inline-flex; align-items: flex-start; gap: var(--mn-space-3); cursor: pointer; }
.mn-check input[type="checkbox"],
.mn-check input[type="radio"] {
  appearance: none;
  width: 20px; height: 20px;
  margin: 0; flex-shrink: 0;
  border: 1.5px solid var(--mn-border-strong);
  background: var(--mn-surface);
  cursor: pointer;
  transition: background var(--mn-dur) var(--mn-ease), border-color var(--mn-dur) var(--mn-ease);
}
.mn-check input[type="checkbox"] { border-radius: var(--mn-radius-xs); }
.mn-check input[type="radio"]    { border-radius: var(--mn-radius-pill); }
.mn-check input:checked { background: var(--mn-brand-600); border-color: var(--mn-brand-600); }
.mn-check input[type="checkbox"]:checked::after {
  content: ''; display: block;
  width: 5px; height: 9px; margin: 3px auto;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.mn-check input[type="radio"]:checked::after {
  content: ''; display: block;
  width: 8px; height: 8px; margin: 4px auto;
  border-radius: var(--mn-radius-pill); background: #fff;
}
.mn-check input:focus-visible { box-shadow: var(--mn-focus-ring); }

/* Switch */
.mn-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.mn-switch input { appearance: none; position: absolute; inset: 0; margin: 0; cursor: pointer; border-radius: var(--mn-radius-pill); background: var(--mn-neutral-300); transition: background var(--mn-dur) var(--mn-ease); }
.mn-switch input::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 18px; height: 18px; border-radius: var(--mn-radius-pill);
  background: #fff; box-shadow: var(--mn-shadow-sm);
  transition: transform var(--mn-dur) var(--mn-ease);
}
.mn-switch input:checked { background: var(--mn-brand-600); }
.mn-switch input:checked::after { transform: translateX(20px); }
.mn-switch input:focus-visible { box-shadow: var(--mn-focus-ring); }

/* ===========================================================================
   7. CARDS
   =========================================================================== */

.mn-card2 {
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  padding: var(--mn-space-6);
  box-shadow: var(--mn-shadow-xs);
  transition: box-shadow var(--mn-dur) var(--mn-ease),
              border-color var(--mn-dur) var(--mn-ease),
              transform var(--mn-dur) var(--mn-ease);
}
/* Interactive cards only — a static card that lifts on hover is noise. */
.mn-card2--interactive:hover {
  transform: translateY(-2px);
  border-color: var(--mn-brand-200);
  box-shadow: var(--mn-shadow-md);
}
.mn-card2--raised   { box-shadow: var(--mn-shadow-md); }
.mn-card2--flush    { padding: 0; overflow: hidden; }
.mn-card2--featured { border-color: var(--mn-brand-300); box-shadow: var(--mn-glow-ambient); }

.mn-card2__header { padding-bottom: var(--mn-space-4); margin-bottom: var(--mn-space-4); border-bottom: 1px solid var(--mn-border-subtle); }
.mn-card2__title  { font-family: var(--mn-font-display); font-size: var(--mn-fs-lg); font-weight: var(--mn-fw-semibold); color: var(--mn-heading); letter-spacing: var(--mn-ls-heading); margin: 0; }
.mn-card2__footer { padding-top: var(--mn-space-4); margin-top: var(--mn-space-4); border-top: 1px solid var(--mn-border-subtle); }

/* Icon tile — normalised, replaces several ad-hoc .icon-box sizes */
.mn-icon-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--mn-radius-md);
  background: var(--mn-brand-50);
  color: var(--mn-brand-700);
  font-size: 18px;
  margin-bottom: var(--mn-space-4);
}
.mn-icon-tile--success { background: var(--mn-success-50); color: var(--mn-success-700); }
.mn-icon-tile--warning { background: var(--mn-warning-50); color: var(--mn-warning-700); }
.mn-icon-tile--danger  { background: var(--mn-danger-50);  color: var(--mn-danger-700); }

/* ===========================================================================
   8. BADGES
   =========================================================================== */

.mn-badge {
  display: inline-flex; align-items: center; gap: var(--mn-space-1);
  padding: 3px var(--mn-space-2);
  font-size: var(--mn-fs-caption);
  font-weight: var(--mn-fw-medium);
  line-height: 1.4;
  border-radius: var(--mn-radius-xs);
  border: 1px solid transparent;
  white-space: nowrap;
}
.mn-badge--neutral { background: var(--mn-neutral-100);  color: var(--mn-text-secondary); border-color: var(--mn-border); }
.mn-badge--brand   { background: var(--mn-brand-50);     color: var(--mn-brand-700);   border-color: var(--mn-brand-100); }
.mn-badge--success { background: var(--mn-success-50);   color: var(--mn-success-700); border-color: var(--mn-success-100); }
.mn-badge--warning { background: var(--mn-warning-50);   color: var(--mn-warning-700); border-color: var(--mn-warning-100); }
.mn-badge--danger  { background: var(--mn-danger-50);    color: var(--mn-danger-700);  border-color: var(--mn-danger-100); }
.mn-badge--info    { background: var(--mn-info-50);      color: var(--mn-info-700);    border-color: var(--mn-info-100); }
.mn-badge--pill    { border-radius: var(--mn-radius-pill); padding-inline: var(--mn-space-3); }

/* Status dot — shape+text carry meaning, not just colour */
.mn-badge__dot { width: 6px; height: 6px; border-radius: var(--mn-radius-pill); background: currentColor; flex-shrink: 0; }

/* ===========================================================================
   9. TABLES
   =========================================================================== */

.mn-table-wrap {
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  overflow-x: auto;              /* wide tables scroll themselves, never the page */
  background: var(--mn-surface);
  -webkit-overflow-scrolling: touch;
}
.mn-table { width: 100%; border-collapse: collapse; font-size: var(--mn-fs-sm); }
.mn-table thead th {
  position: sticky; top: 0;
  background: var(--mn-surface-sunken);
  padding: var(--mn-space-3) var(--mn-space-4);
  text-align: left;
  font-size: var(--mn-fs-caption);
  font-weight: var(--mn-fw-semibold);
  letter-spacing: var(--mn-ls-caps);
  text-transform: uppercase;
  color: var(--mn-text-muted);
  border-bottom: 1px solid var(--mn-border);
  white-space: nowrap;
}
.mn-table tbody td {
  padding: var(--mn-space-4);
  color: var(--mn-text);
  border-bottom: 1px solid var(--mn-border-subtle);
  vertical-align: middle;
}
.mn-table tbody tr:last-child td { border-bottom: 0; }
.mn-table tbody tr { transition: background var(--mn-dur-fast) var(--mn-ease); }
.mn-table tbody tr:hover { background: var(--mn-surface-sunken); }
.mn-table tbody tr[aria-selected="true"] { background: var(--mn-brand-50); }

/* Sortable header — button so it's keyboard reachable */
.mn-table th button {
  display: inline-flex; align-items: center; gap: var(--mn-space-1);
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: inherit;
}
.mn-table th button:hover { color: var(--mn-heading); }
.mn-table th[aria-sort] button { color: var(--mn-brand-700); }

.mn-table__numeric { text-align: right; font-variant-numeric: tabular-nums; }

/* ===========================================================================
   10. ALERTS / NOTIFICATIONS
   ---------------------------------------------------------------------------
   Left keyline + icon + tint. Icon is required: colour alone fails WCAG 1.4.1.
   =========================================================================== */

.mn-alert {
  display: flex; gap: var(--mn-space-3);
  padding: var(--mn-space-4);
  border: 1px solid transparent;
  border-left-width: 3px;
  border-radius: var(--mn-radius-md);
  font-size: var(--mn-fs-sm);
  line-height: var(--mn-lh-normal);
}
.mn-alert__icon  { flex-shrink: 0; font-size: 16px; line-height: 1.4; }
.mn-alert__title { font-weight: var(--mn-fw-semibold); margin: 0 0 var(--mn-space-1); }
.mn-alert__body  { margin: 0; color: var(--mn-text-secondary); }

.mn-alert--info    { background: var(--mn-info-50);    border-color: var(--mn-info-100);    border-left-color: var(--mn-info-600);    color: var(--mn-info-700); }
.mn-alert--success { background: var(--mn-success-50); border-color: var(--mn-success-100); border-left-color: var(--mn-success-600); color: var(--mn-success-700); }
.mn-alert--warning { background: var(--mn-warning-50); border-color: var(--mn-warning-100); border-left-color: var(--mn-warning-400); color: var(--mn-warning-700); }
.mn-alert--danger  { background: var(--mn-danger-50);  border-color: var(--mn-danger-100);  border-left-color: var(--mn-danger-600);  color: var(--mn-danger-700); }

/* Toast */
.mn-toast {
  position: fixed; bottom: var(--mn-space-6); right: var(--mn-space-6);
  z-index: var(--mn-z-toast);
  max-width: 380px;
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  box-shadow: var(--mn-shadow-xl);
  padding: var(--mn-space-4);
  animation: mn-toast-in var(--mn-dur-slow) var(--mn-ease);
}
@keyframes mn-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ===========================================================================
   11. MODALS
   =========================================================================== */

.mn-backdrop {
  position: fixed; inset: 0;
  z-index: var(--mn-z-backdrop);
  background: rgba(35,34,31,.48);
  backdrop-filter: blur(4px);
  animation: mn-fade var(--mn-dur) var(--mn-ease);
}
@keyframes mn-fade { from { opacity: 0; } to { opacity: 1; } }

.mn-modal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--mn-z-modal);
  width: min(560px, calc(100vw - var(--mn-space-8)));
  max-height: calc(100vh - var(--mn-space-16));
  display: flex; flex-direction: column;
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-xl);
  box-shadow: var(--mn-shadow-xl);
  animation: mn-modal-in var(--mn-dur-slow) var(--mn-ease);
}
@keyframes mn-modal-in {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)) scale(.98); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.mn-modal__header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--mn-space-4);
  padding: var(--mn-space-6) var(--mn-space-6) var(--mn-space-4);
  border-bottom: 1px solid var(--mn-border-subtle);
}
.mn-modal__title { font-family: var(--mn-font-display); font-size: var(--mn-fs-xl); font-weight: var(--mn-fw-bold); color: var(--mn-heading); letter-spacing: var(--mn-ls-heading); margin: 0; }
.mn-modal__body  { padding: var(--mn-space-6); overflow-y: auto; color: var(--mn-text); line-height: var(--mn-lh-normal); }
.mn-modal__footer {
  display: flex; justify-content: flex-end; gap: var(--mn-space-3);
  padding: var(--mn-space-4) var(--mn-space-6) var(--mn-space-6);
  border-top: 1px solid var(--mn-border-subtle);
}
.mn-modal__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border: 0; border-radius: var(--mn-radius-sm);
  background: transparent; color: var(--mn-text-muted);
  cursor: pointer;
  transition: background var(--mn-dur) var(--mn-ease), color var(--mn-dur) var(--mn-ease);
}
.mn-modal__close:hover { background: var(--mn-surface-hover); color: var(--mn-heading); }

/* ===========================================================================
   12. NAVIGATION
   =========================================================================== */

.mn-nav-link {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--mn-space-2);
  padding: var(--mn-space-2) var(--mn-space-3);
  border-radius: var(--mn-radius-sm);
  font-size: var(--mn-fs-sm);
  font-weight: var(--mn-fw-medium);
  color: var(--mn-text-secondary);
  text-decoration: none;
  transition: color var(--mn-dur) var(--mn-ease), background var(--mn-dur) var(--mn-ease);
}
.mn-nav-link:hover { color: var(--mn-heading); background: var(--mn-surface-hover); }
.mn-nav-link[aria-current="page"] { color: var(--mn-brand-700); background: var(--mn-brand-50); }

.mn-dropdown {
  min-width: 200px;
  padding: var(--mn-space-2);
  background: var(--mn-surface);
  border: 1px solid var(--mn-border);
  border-radius: var(--mn-radius-lg);
  box-shadow: var(--mn-shadow-lg);
  z-index: var(--mn-z-dropdown);
}
.mn-dropdown__item {
  display: flex; align-items: center; gap: var(--mn-space-3);
  width: 100%;
  padding: var(--mn-space-2) var(--mn-space-3);
  border: 0; border-radius: var(--mn-radius-sm);
  background: none;
  font-size: var(--mn-fs-sm);
  color: var(--mn-text);
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background var(--mn-dur-fast) var(--mn-ease);
}
.mn-dropdown__item:hover { background: var(--mn-surface-hover); color: var(--mn-heading); }
.mn-dropdown__item--danger { color: var(--mn-danger-700); }
.mn-dropdown__item--danger:hover { background: var(--mn-danger-50); }
.mn-dropdown__sep { height: 1px; margin: var(--mn-space-2) 0; background: var(--mn-border-subtle); border: 0; }

/* Breadcrumbs */
.mn-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mn-space-2); font-size: var(--mn-fs-sm); list-style: none; padding: 0; margin: 0; }
.mn-crumbs li { display: flex; align-items: center; gap: var(--mn-space-2); color: var(--mn-text-muted); }
.mn-crumbs li:not(:last-child)::after { content: '/'; color: var(--mn-border-strong); }
.mn-crumbs a { color: var(--mn-text-secondary); text-decoration: none; }
.mn-crumbs a:hover { color: var(--mn-link); }
.mn-crumbs [aria-current="page"] { color: var(--mn-heading); font-weight: var(--mn-fw-medium); }

/* ===========================================================================
   13. LAYOUT HELPERS
   =========================================================================== */

.mn-container { width: 100%; max-width: var(--mn-container); margin-inline: auto; padding-inline: var(--mn-space-5); }
.mn-section   { padding-block: var(--mn-space-24); }
.mn-section--tight { padding-block: var(--mn-space-16); }
.mn-stack > * + * { margin-top: var(--mn-space-4); }
.mn-divider { height: 1px; background: var(--mn-border-subtle); border: 0; margin-block: var(--mn-space-8); }

@media (max-width: 991px) {
  .mn-section { padding-block: var(--mn-space-16); }
  :root { --mn-fs-5xl: 2.75rem; --mn-fs-4xl: 2.25rem; --mn-fs-3xl: 1.875rem; }
}
@media (max-width: 575px) {
  .mn-container { padding-inline: var(--mn-space-4); }
  .mn-section { padding-block: var(--mn-space-12); }
  :root { --mn-fs-5xl: 2.25rem; --mn-fs-4xl: 1.875rem; --mn-fs-3xl: 1.625rem; }
  .mn-toast { left: var(--mn-space-4); right: var(--mn-space-4); bottom: var(--mn-space-4); max-width: none; }
}