/* Meesmo redesign design tokens.
   Fonts: load Manrope (400-800) and DM Sans (400-700). Georgia is a system font. */

:root {
  /* Type */
  --mz-font-display: 'Manrope', system-ui, sans-serif;
  --mz-font-body: 'DM Sans', system-ui, sans-serif;
  --mz-font-accent: Georgia, 'Times New Roman', serif; /* italic, weight 400, accent phrases only */

  --mz-h1: clamp(46px, 6.4vw, 88px);
  --mz-h2: clamp(34px, 4.2vw, 60px);
  --mz-h3: clamp(26px, 2.6vw, 36px);
  --mz-body-lg: clamp(17px, 1.45vw, 20px);
  --mz-body: 16px;
  --mz-small: 14px;
  --mz-eyebrow: 13px;          /* bold, uppercase, letter-spacing 0.14em */
  --mz-heading-weight: 700;
  --mz-heading-tracking: -0.035em;

  /* Page */
  --mz-bg: #F7F8F2;
  --mz-surface: #FFFFFF;
  --mz-surface-2: #F1F3EC;
  --mz-ink: #182E2B;
  --mz-ink-2: #4A5C58;
  --mz-ink-3: #3D4A47;
  --mz-line: #DDE2D6;
  --mz-line-soft: #EEF1EA;
  --mz-track: #ECEFE6;          /* empty part of bars */

  /* Actions */
  --mz-forest: #1F5C45;         /* primary buttons, accent phrases, progress */
  --mz-forest-dark: #163F31;
  --mz-lime: #E4EDB8;           /* highlight pills; always ink text on it */
  --mz-switch-off: #C9D0C3;
  --mz-danger: #9B2C1F;

  /* Pillars: background / dark text / accent */
  --mz-play-bg: #FFE6D6;
  --mz-play-ink: #8A3410;
  --mz-play-accent: #FF864B;    /* stamp borders only, never text */
  --mz-play-deep: #B4471A;

  --mz-discover-bg: #E9E4F7;
  --mz-discover-ink: #3B2E80;
  --mz-discover-accent: #5B4BA8;
  --mz-discover-track: #EEEBF8;

  --mz-fit-bg: #DDEBD8;
  --mz-fit-ink: #163F31;
  --mz-fit-text: #2F403C;
  --mz-fit-dash: #7E9A86;

  --mz-take-bg: #DCEAF3;
  --mz-take-ink: #1D4A66;
  --mz-take-accent: #9FC7E0;    /* on dark backgrounds */

  /* Dark band (passport section) */
  --mz-night: #13221F;
  --mz-night-raised: #1F3531;
  --mz-night-text: #F2EFDB;
  --mz-night-muted: #C9CBB8;

  /* Seasonal panel */
  --mz-season-bg: #1C1A26;
  --mz-season-card: #262433;
  --mz-season-line: #3A3748;
  --mz-season-accent: #FFB48C;
  --mz-season-muted: #B8B9A6;

  /* Shape */
  --mz-radius-pill: 999px;
  --mz-radius-xl: 40px;   /* closing CTA panel */
  --mz-radius-lg: 32px;   /* pillar cards */
  --mz-radius-md: 28px;   /* standard cards */
  --mz-radius-sm: 20px;   /* inner panels */
  --mz-radius-xs: 14px;   /* chips, small buttons */

  /* Layout */
  --mz-content-max: 1200px;
  --mz-gutter: clamp(16px, 4vw, 40px);
  --mz-section-pad: clamp(64px, 7vw, 104px);
  --mz-card-shadow: 0 30px 60px -30px rgba(24, 46, 43, 0.35);

  /* Logo: never recolor. Wordmark #2c2c2c, dot #73a657. Use assets/brand/meesmo.svg. */
}

:focus-visible {
  outline: 3px solid var(--mz-forest);
  outline-offset: 2px;
}

.mz-accent {
  font-family: var(--mz-font-accent);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--mz-forest);
}