/* Mia for VP design tokens. Generated by brand-kit build_tokens.py from tokens/tokens.json on 2026-09-20. */
/* Do not edit by hand: change tokens.json and rebuild. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Inter:wght@600;700&family=Nunito:wght@400;600;700&display=swap");
:root {
  /* Brand palette */
  --mv-plum: #3B1D2B;  /* ink: headings, body emphasis, the single dark band in the footer */
  --mv-rose: #BE4C78;  /* the interactive color: primary buttons, links, focus ring, first chart series */
  --mv-rose-deep: #992D56;  /* links, hover fill, focus ring, and text on petal or blush fills */
  --mv-mid-rose: #E58CAF;  /* mid tone for charts, illustration and dividers; never a text color */
  --mv-petal: #F3C6DA;  /* the mark under a headline word, the field of the sticky nav bar, badges, the photo arch, icon tiles */
  --mv-blush: #FBE7F0;  /* alternating band field, decorative circles, soft card fill */
  --mv-shell: #FFF9FB;  /* the default page field; a pink-white, so the page reads warm rather than clinical */
  /* Neutral ramp */
  --mv-white: #FFFFFF;  /* card field on shell and blush bands, titles in the plum footer */
  --mv-gray-1: #F6EEF1;  /* disabled fills, skeleton blocks */
  --mv-gray-2: #EBD3DE;  /* borders and dividers on light */
  --mv-gray-3: #C9B2BC;  /* paragraph text on the plum footer */
  --mv-gray-4: #7D5A68;  /* captions, labels, placeholders on light */
  --mv-gray-5: #56303F;  /* panel and hover fill inside the plum footer */
  /* Roles (semantic aliases) */
  --mv-field-light: #FFF9FB;  /* default page field */
  --mv-field-tint: #FBE7F0;  /* alternating band, soft cards */
  --mv-field-dark: #3B1D2B;  /* footer only; there is no dark hero in this brand */
  --mv-title-on-light: #3B1D2B;  /* headings on shell, blush and white */
  --mv-title-on-dark: #FFFFFF;  /* headings in the footer */
  --mv-body-on-light: #6B4A58;  /* paragraph text on light; never pure black */
  --mv-body-on-dark: #C9B2BC;  /* paragraph text in the footer; never pure white */
  --mv-muted: #7D5A68;  /* captions, labels, placeholders, help text */
  --mv-primary: #BE4C78;  /* primary button fill */
  --mv-primary-hover: #992D56;  /* primary hover and pressed fill */
  --mv-on-primary: #FFFFFF;  /* text and icons on the primary fill */
  --mv-link: #992D56;  /* text links on light; deeper than primary because #BE4C78 misses AA at body size */
  --mv-link-on-dark: #F3C6DA;  /* text links in the footer */
  --mv-line-light: #EBD3DE;  /* borders and dividers on light */
  --mv-line-dark: rgba(255,255,255,.16);  /* borders and dividers in the footer */
  --mv-card-light: #FFFFFF;  /* card field on shell and blush bands */
  --mv-card-dark: rgba(255,255,255,.06);  /* card field in the footer */
  --mv-focus: #992D56;  /* focus ring; deeper than primary so it reads on a rose button */
  --mv-success: #276B50;  /* form success, confirmed states */
  --mv-warning: #855C10;  /* caution notices */
  --mv-danger: #A33232;  /* form errors, destructive confirm */
  /* Implementation values */
  --mv-petal-ink: #992D56;  /* text and icons sitting on petal or blush fills */
  --mv-fill-light: rgba(59,29,43,.05);  /* secondary and ghost button hover on light */
  --mv-fill-dark-hover: rgba(255,255,255,.12);  /* button hover inside the footer */
  --mv-blob: #FBE7F0;  /* the decorative background circles; never behind body text */
  --mv-icon-tile: #FBE7F0;  /* the round tile behind a card icon on white */
  --mv-icon-tile-alt: #FFFFFF;  /* the round tile behind a card icon on a blush card */
  --mv-input-field: #FFFFFF;  /* text input field on any light band */
  --mv-disabled-ink: #A8929B;  /* text inside a disabled control */
  --mv-skeleton-shine: rgba(255,255,255,.65);  /* the moving highlight in a loading skeleton */
  /* Tints: fills, tags, chart layers, hover. Never for text. */
  --mv-rose-80: rgba(190,76,120,.8); --mv-rose-60: rgba(190,76,120,.6); --mv-rose-40: rgba(190,76,120,.4); --mv-rose-20: rgba(190,76,120,.2);
  --mv-petal-80: rgba(243,198,218,.8); --mv-petal-60: rgba(243,198,218,.6); --mv-petal-40: rgba(243,198,218,.4); --mv-petal-20: rgba(243,198,218,.2);
  --mv-mid-rose-80: rgba(229,140,175,.8); --mv-mid-rose-60: rgba(229,140,175,.6); --mv-mid-rose-40: rgba(229,140,175,.4); --mv-mid-rose-20: rgba(229,140,175,.2);
  --mv-plum-80: rgba(59,29,43,.8); --mv-plum-60: rgba(59,29,43,.6); --mv-plum-40: rgba(59,29,43,.4); --mv-plum-20: rgba(59,29,43,.2);
  /* Type */
  --mv-font-head: Inter, Helvetica Neue, Arial, sans-serif;
  --mv-font-body: Nunito, Trebuchet MS, Verdana, sans-serif;
  --mv-font-mono: "IBM Plex Mono", Courier New, monospace;
  --mv-fs-display: 72px; --mv-lh-display: 1.1; --mv-fw-display: 700; --mv-ls-display: -0.022em;
  --mv-fs-h1: 52px; --mv-lh-h1: 1.12; --mv-fw-h1: 700; --mv-ls-h1: -0.02em;
  --mv-fs-h2: 40px; --mv-lh-h2: 1.25; --mv-fw-h2: 700; --mv-ls-h2: -0.018em;
  --mv-fs-h3: 30px; --mv-lh-h3: 1.25; --mv-fw-h3: 600;
  --mv-fs-h4: 24px; --mv-lh-h4: 1.3; --mv-fw-h4: 600;
  --mv-fs-h5: 22px; --mv-lh-h5: 1.35; --mv-fw-h5: 600;
  --mv-fs-lede: 22px; --mv-lh-lede: 1.6; --mv-fw-lede: 400;
  --mv-fs-body: 18px; --mv-lh-body: 1.65; --mv-fw-body: 400;
  --mv-fs-small: 16px; --mv-lh-small: 1.6; --mv-fw-small: 400;
  --mv-fs-caption: 15px; --mv-lh-caption: 1.5; --mv-fw-caption: 400;
  --mv-fs-button: 16px; --mv-lh-button: 1.0; --mv-fw-button: 700; --mv-ls-button: 0.01em;
  --mv-fs-badge: 13px; --mv-lh-badge: 1.0; --mv-fw-badge: 700; --mv-ls-badge: 0.06em; --mv-tt-badge: uppercase;
  --mv-fs-overline: 13px; --mv-lh-overline: 1.4; --mv-fw-overline: 500; --mv-ls-overline: 0.16em; --mv-tt-overline: uppercase;
  --mv-fs-credit: 13px; --mv-lh-credit: 1.4; --mv-fw-credit: 500; --mv-ls-credit: 0.08em; --mv-tt-credit: uppercase;
  /* Radius */
  --mv-radius-default: 24px;
  --mv-radius-sm: 12px;
  --mv-radius-button: 999px;
  --mv-radius-input: 16px;
  --mv-radius-pill: 999px;
  --mv-radius-tile: 999px;
  --mv-radius-photo: 140px 140px 24px 24px;
  /* Space */
  --mv-space-xs: 8px;
  --mv-space-sm: 12px;
  --mv-space-md: 16px;
  --mv-space-lg: 24px;
  --mv-space-xl: 40px;
  --mv-space-2xl: 64px;
  --mv-space-3xl: 96px;
  /* Elevation */
  --mv-shadow-none: none;
  --mv-shadow-card: none;
  --mv-shadow-sticky: 0 -1px 0 var(--mv-plum-20);
  /* Motion */
  --mv-motion-fast: 140ms;
  --mv-motion-base: 240ms;
  --mv-motion-ease: cubic-bezier(.2,.8,.2,1);
  /* Icons */
  --mv-icon-grid: 24px;
  --mv-icon-stroke: 2px;
  --mv-icon-linecap: round;
  --mv-icon-linejoin: round;
  /* Layout (breakpoints are comments: custom properties cannot drive media queries) */
  --mv-container: 1120px;
  --mv-gutter: 24px;
  --mv-section-y: 96px;
  --mv-nav-height: 72px;
  --mv-nav-height-sm: 56px;
  --mv-bar-height: 60px;
  --mv-measure: 66ch;
  --mv-lh-display-sm: 1.22;
  /* breakpoints: sm 640px, md 820px, lg 1024px, xl 1280px */
}