/* =============================================================================
   MEI design tokens · v1.0 (Fase 2, frozen)
   Source of truth: drafts/E. Only custom properties here: no selectors other than :root.
   Contrast ratios are WCAG 2.x, measured on the listed background.
   Breakpoints (mobile-first, use in min-width media queries, not as variables):
     640px  sm   · tablet portrait, gutters widen
     1024px md   · desktop layout, pinned steps, comparison table, parallax
     1280px lg   · full header nav + language switcher
     1440px xl   · header bar aligns to the container
   ========================================================================== */

:root {
  /* ---------- Brand palette (only these three + tints, white, navy-leaning neutrals) ---------- */
  --mei-navy: #211b45;          /* primary text, dark sections. 16.1:1 on white, 14.3:1 on beige-3 */
  --mei-navy-2: #2f2862;        /* cards/panels on navy. White on it 13.1:1 */
  --mei-navy-3: #4a4478;        /* secondary text on light: 8.8:1 white, 7.8:1 beige-3, 6.3:1 beige */
  --mei-navy-4: #5d5880;        /* muted text on light: 6.6:1 white, 5.9:1 beige-3, 4.7:1 beige */
  --mei-navy-5: #857fa3;        /* lightened navy for UI borders only (inputs): 3.8:1 white, 3.4:1 beige-3. Never text */
  --mei-navy-tint: #f0eff5;     /* navy veil: hover rows, chips, soft fills */
  --mei-navy-tint-2: #e2e0ec;   /* decorative strokes, dividers on white (not a boundary for inputs) */

  --mei-coral: #d8334d;         /* signal: primary CTA, dots, ticks, key accents. White on it 4.7:1 (text ≥16px/600) */
  --mei-coral-ink: #b82a42;     /* SMALL coral text on light: 6.1:1 white, 5.4:1 beige-3, 5.2:1 coral-tint. Also CTA hover */
  --mei-coral-soft: #f08a9a;    /* coral text on navy: 6.7:1 navy, 5.5:1 navy-2 */
  --mei-coral-tint: #fbe9ec;    /* soft coral fill: tick discs, tags, soft chips */

  --mei-beige: #dddac8;         /* MEI column, strong warm fill. Coral on it only ≥24px (3.3:1) */
  --mei-beige-2: #ebe9de;       /* quiet fills, meter tracks, 'no' symbol disc */
  --mei-beige-3: #f4f2ea;       /* warm section surface */
  --mei-beige-4: #faf9f4;       /* card surface on white */
  --mei-beige-hl: #e6e3d4;      /* hover of the MEI column (beige, slightly darker): navy 12.5:1 */
  --mei-white: #ffffff;

  /* functional green: ONLY for 'yes' ticks in comparison tables (graphic, 4.4:1 vs white, 3.1:1 vs beige) */
  --mei-yes: #1e8a4c;

  /* ---------- Semantic roles: light surfaces ---------- */
  --mei-text: var(--mei-navy);            /* body + headings */
  --mei-text-2: var(--mei-navy-3);        /* lead, descriptions */
  --mei-text-3: var(--mei-navy-4);        /* notes, captions, meta */
  --mei-text-accent: var(--mei-coral-ink);/* eyebrows, step labels, small coral text */
  --mei-text-error: var(--mei-coral-ink); /* form errors on light (6.1:1) */
  --mei-surface: var(--mei-white);        /* default page */
  --mei-surface-warm: var(--mei-beige-3); /* beige sections */
  --mei-surface-card: var(--mei-beige-4); /* cards on white */
  --mei-surface-strong: var(--mei-beige); /* MEI column, footer divider */
  --mei-border: #e8e5da;                  /* hairlines, card borders (decorative) */
  --mei-border-strong: var(--mei-navy-tint-2);
  --mei-border-input: var(--mei-navy-5);  /* input/checkbox boundaries, ≥3:1 (WCAG 1.4.11) */
  --mei-focus: var(--mei-coral);          /* focus ring, 3px: 4.7:1 on white (coral-soft on navy) */
  --mei-focus-ring: rgba(216, 51, 77, .2); /* soft ring around focused inputs (in addition to the border) */
  --mei-accent: var(--mei-coral);         /* LARGE accents and graphics (serif accent, dots): ≥24px text only */
  --mei-fill: var(--mei-navy-tint);       /* soft fill: chips, hover rows */
  --mei-input-bg: var(--mei-white);
  --mei-tick-bg: var(--mei-coral-tint);   /* disc behind list ticks */
  --mei-tick-fg: var(--mei-coral);        /* tick stroke */
  --mei-card-border: var(--mei-border);
  /* component roles (remapped on navy by base.css) */
  --mei-underline: var(--mei-coral);        /* link underline */
  --mei-soft-bg: var(--mei-coral-tint);     /* soft coral chip / tag */
  --mei-soft-fg: var(--mei-coral-ink);      /* 5.2:1 on coral-tint */
  --mei-pill-bg: var(--mei-beige-3);        /* eyebrow pill */
  --mei-pill-fg: var(--mei-navy-3);
  --mei-track: var(--mei-beige-2);          /* meter and bar tracks */
  --mei-meter-fill: var(--mei-navy);
  --mei-bar-was: var(--mei-navy-5);
  --mei-ico-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23211b45' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M10 5v10M5 10h10'/%3E%3C/svg%3E");
  --mei-ico-select: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23211b45' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8'/%3E%3C/svg%3E");

  /* ---------- Semantic roles: on navy ---------- */
  --mei-on-dark: #ffffff;                 /* 16.1:1 navy */
  --mei-on-dark-2: #c9c6dc;               /* secondary text: 9.6:1 navy, 7.9:1 navy-2 */
  --mei-on-dark-3: #a29dc0;               /* muted text, placeholders: 6.2:1 navy, 5.1:1 navy-2 */
  --mei-on-dark-accent: var(--mei-coral-soft);
  --mei-surface-dark: var(--mei-navy);
  --mei-surface-dark-2: var(--mei-navy-2);
  --mei-border-dark: rgba(255, 255, 255, .12);     /* hairlines on navy */
  --mei-border-dark-input: rgba(255, 255, 255, .45); /* input boundary on navy: 3.5:1 vs navy-2 */
  --mei-fill-dark: rgba(255, 255, 255, .08);       /* soft fills on navy */
  /* Inside .mei-dark / .mei-section--navy, base.css remaps every role above (text, border, accent, fill,
     input, tick, focus) to its on-dark value, so components adapt without dark-specific classes. */

  /* ---------- Typography ---------- */
  /* Two logical families, each composed of two fonts via unicode-range (see base.css @font-face):
     MEI Sans  = Plus Jakarta Sans (latin, latin-ext) + Manrope (cyrillic, cyrillic-ext)
     MEI Serif = Instrument Serif italic (latin, latin-ext) + Cormorant italic 500 (cyrillic, cyrillic-ext) */
  --mei-font-sans: "MEI Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mei-font-serif: "MEI Serif", Georgia, "Times New Roman", serif;
  --mei-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* code in blog posts only */

  --mei-fw-regular: 400;
  --mei-fw-medium: 500;
  --mei-fw-semibold: 600;
  --mei-fw-bold: 700;
  --mei-fw-black: 800;       /* logo, equation, numbers */

  /* fluid scale (mobile 375 → desktop 1440) */
  --mei-fs-xs: .8125rem;     /* 13px: meta, legends */
  --mei-fs-small: .9375rem;  /* 15px: notes, labels, nav */
  --mei-fs-body: 1.0625rem;  /* 17px, 18px from 1024 */
  --mei-fs-lead: clamp(1.1875rem, 1.6vw, 1.375rem);              /* 19 → 22 */
  --mei-fs-h4: 1.25rem;                                          /* 20 */
  --mei-fs-h3: clamp(1.5rem, 2.2vw, 2rem);                       /* 24 → 32 */
  --mei-fs-h2-md: clamp(2.125rem, 3.8vw, 3.5rem);                /* 34 → 56 */
  --mei-fs-h2: clamp(2.25rem, 4.6vw, 4.25rem);                   /* 36 → 68: section headline */
  --mei-fs-h2-xl: clamp(2.75rem, 6.4vw, 6rem);                   /* 44 → 96: closing headline */
  --mei-fs-h1: clamp(2.5rem, 5.6vw, 5rem);                       /* 40 → 80: inner page title */
  --mei-fs-display: clamp(2.625rem, 11.6vw, 4.5rem);             /* 42 → 72 mobile/tablet; see md override */
  --mei-fs-statement: clamp(1.75rem, 3.4vw, 2.75rem);            /* 28 → 44: big statement paragraph */
  --mei-fs-num: clamp(2.75rem, 5vw, 4rem);                       /* 44 → 64: number band */
  --mei-fs-price: 2.5rem;                                        /* 40 */

  --mei-lh-tight: 1.04;      /* h2 and larger */
  --mei-lh-snug: 1.15;       /* h3 */
  --mei-lh-heading: 1.25;    /* h4, card titles */
  --mei-lh-lead: 1.5;
  --mei-lh-body: 1.6;

  --mei-track-display: -.03em;
  --mei-track-head: -.022em;
  --mei-track-h3: -.015em;
  --mei-track-h4: -.01em;
  --mei-track-caps: .08em;   /* small uppercase labels (status pills) */

  --mei-measure: 34em;       /* max line length for lead/intro text */
  --mei-measure-prose: 68ch; /* blog body */

  /* ---------- Spacing (4px base) ---------- */
  --mei-space-1: 4px;
  --mei-space-2: 8px;
  --mei-space-3: 12px;
  --mei-space-4: 16px;
  --mei-space-5: 20px;
  --mei-space-6: 24px;
  --mei-space-7: 28px;
  --mei-space-8: 32px;
  --mei-space-9: 40px;
  --mei-space-10: 48px;
  --mei-space-11: 56px;
  --mei-space-12: 64px;
  --mei-space-13: 88px;
  --mei-sec-y: clamp(88px, 11vw, 168px);            /* section vertical padding */
  --mei-sec-head-gap: clamp(48px, 6vw, 88px);       /* section head → content */
  --mei-block-gap: clamp(56px, 7vw, 96px);          /* between big blocks inside a section */
  --mei-card-pad: 28px 24px;                        /* 36px 32px / 40px from md (see below) */
  --mei-gap: 24px;                                  /* grid gap, 32px from md */

  /* ---------- Layout ---------- */
  --mei-max: 1200px;         /* container content width */
  --mei-max-narrow: 860px;   /* narrow sections (problem) */
  --mei-max-prose: 720px;    /* articles */
  --mei-gutter: 20px;        /* 32px sm, 40px md */
  --mei-hdr-h: 64px;         /* 76px from md */

  /* ---------- Shape ---------- */
  --mei-r-s: 8px;            /* checkboxes, small chips */
  --mei-r-m: 12px;           /* buttons, inputs, tiles */
  --mei-r-l: 16px;           /* small cards, badges, review source */
  --mei-r-xl: 20px;          /* cards, panels, steps */
  --mei-r-2xl: 24px;         /* comparison table, photo */
  --mei-r-pill: 999px;

  /* ---------- Elevation (navy-tinted, never black on light) ---------- */
  --mei-shadow-1: 0 1px 2px rgba(33, 27, 69, .05), 0 6px 20px rgba(33, 27, 69, .05);  /* resting card */
  --mei-shadow-2: 0 2px 4px rgba(33, 27, 69, .05), 0 16px 40px rgba(33, 27, 69, .09); /* hover / floating card */
  --mei-shadow-cta: 0 6px 18px rgba(216, 51, 77, .22);                                /* primary button */
  --mei-shadow-dark: 0 30px 60px rgba(0, 0, 0, .25);                                  /* white window on navy */
  --mei-shadow-hdr: 0 1px 0 var(--mei-border);                                        /* header hairline */

  /* ---------- Motion (opacity + transform only, 300–700 ms) ---------- */
  --mei-ease: cubic-bezier(.2, .7, .2, 1);
  --mei-dur-s: 300ms;        /* hover, small state changes */
  --mei-dur-m: 500ms;        /* lifts, link underline, header tuck */
  --mei-dur-l: 700ms;        /* reveals, column reveal, step change */
  --mei-stagger: 90ms;       /* per-item delay in a staggered group */
  --mei-reveal-y: 24px;      /* reveal travel */
  --mei-lift-s: -2px;        /* button hover */
  --mei-lift-m: -3px;        /* badge hover */
  --mei-lift-l: -6px;        /* card hover */

  /* ---------- Z-index ---------- */
  --mei-z-base: 1;
  --mei-z-raised: 2;         /* card above decorative layers */
  --mei-z-sticky: 10;        /* sticky panels */
  --mei-z-hdr: 50;           /* fixed header + mobile menu */
  --mei-z-overlay: 80;       /* cookie banner, dialogs */
  --mei-z-skip: 100;         /* skip link */
}

@media (min-width: 640px) {
  :root { --mei-gutter: 32px; }
}
@media (min-width: 1024px) {
  :root {
    --mei-gutter: 40px;
    --mei-fs-body: 1.125rem;
    --mei-hdr-h: 76px;
    --mei-gap: 32px;
    --mei-card-pad: 40px;
    --mei-fs-display: clamp(4.5rem, 8.4vw, 8.25rem); /* 86 → 132 */
  }
}