/* ==========================================================================
   Meridian — tema únic del producte (aprovat pel client, issue #23)
   Tokens importats del design system `design-system-meridian` del projecte
   Claude Design "Calculadora Pressupost EV - FINAL".
   Cap altre tema: el switcher del prototip queda eliminat (PRD §3).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Color de marca */
  --mr-primary: #3454d1;
  --mr-primary-dark: #7c92ff;
  --mr-primary-active: #2a44ac;

  /* Text */
  --mr-ink: #16181d;
  --mr-body-on-dark: #ffffff;
  --mr-body-muted-dark: #b7bac2;
  --mr-body-muted-light: #6b6f78;

  /* Superfícies */
  --mr-canvas: #ffffff;
  --mr-canvas-mist: #f4f5f7;
  --mr-surface-ghost: #fafafc;

  --mr-tile-dark-1: #17181b;
  --mr-tile-dark-2: #1c1d20;
  --mr-tile-dark-3: #131417;

  --mr-hairline: #e3e4e7;
  --mr-divider-soft: rgba(0, 0, 0, 0.06);

  --mr-product-shadow: 0 20px 40px rgba(20, 20, 30, 0.18);

  /* Tipografia */
  --mr-font-display: "Inter", system-ui, sans-serif;
  --mr-font-body: "Inter", system-ui, sans-serif;

  /* Escala fluida: creix amb l'amplada del viewport fins als valors del
     disseny (52/38/22px a ≥1280px) i baixa suaument en pantalles petites.
     Així no hi ha salts bruscos entre breakpoints. */
  --mr-size-hero: clamp(28px, 1.45rem + 2.25vw, 52px);
  --mr-size-display: clamp(24px, 1.3rem + 1.35vw, 38px);
  --mr-size-lead: clamp(16px, 0.93rem + 0.56vw, 22px);
  --mr-size-tagline: 19px;
  --mr-size-body: 16px;
  --mr-size-caption: 13px;
  --mr-size-fine: 12px;

  --mr-tracking-tight: -0.01em;
  --mr-weight-light: 300;
  --mr-weight-regular: 400;
  --mr-weight-medium: 500;
  --mr-weight-bold: 600;

  /* Espaiat */
  --mr-space-xxs: 4px;
  --mr-space-xs: 8px;
  --mr-space-sm: 12px;
  --mr-space-md: 16px;
  --mr-space-lg: 24px;
  --mr-space-xl: 32px;
  --mr-space-xxl: clamp(32px, 1.5rem + 1.8vw, 48px);
  --mr-space-section: clamp(40px, 1.98rem + 3.15vw, 72px);
  /* Marge lateral de les seccions */
  --mr-gutter: clamp(18px, 3vw, 24px);

  /* Radis */
  --mr-radius-none: 0px;
  --mr-radius-sm: 8px;
  --mr-radius-md: 14px;
  --mr-radius-lg: 20px;
  --mr-radius-pill: 9999px;
}

/* La tipografia i l'espaiat ja són fluids (clamp): no calen overrides per
   breakpoint. Els canvis de layout per amplada són a app.css. */