/* ==========================================================================
   Tokens del sistema de disseny "Modernist" (maqueta Claude Design)
   Tot el tema beu d'aquí. No posar hex fora d'aquest fitxer.
   ========================================================================== */
:root {
  /* Colors base */
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);
  --color-divider-soft: color-mix(in srgb, #201e1d 18%, transparent);

  /* Text atenuat (la maqueta usa color-mix del text) */
  --color-text-82: color-mix(in srgb, var(--color-text) 82%, transparent);
  --color-text-78: color-mix(in srgb, var(--color-text) 78%, transparent);
  --color-text-60: color-mix(in srgb, var(--color-text) 60%, transparent);

  /* Rampa neutre */
  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  /* Rampa accent */
  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d0c02;

  /* Tipografia */
  --font-heading: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 800;

  /* Escales */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px;
  --radius-sm: 0; --radius-md: 0; --radius-lg: 0;
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);

  /* Retícula */
  --edge: clamp(20px, 5vw, 72px);
  --container: 1240px;
  --rule: 2px solid var(--color-divider);
  --rule-strong: 2px solid var(--color-text);
  --section-pad-top: 56px;
  --section-pad-bottom: 56px;

  /* Mides de text */
  --text-body: 16px;
  --text-lead: 17.5px;
  --text-small: 15.5px;
  --text-kicker: 13px;
  --h1: clamp(44px, 6.6vw, 92px);
  --h1-page: clamp(40px, 5.6vw, 76px);
  --h2: clamp(30px, 3.2vw, 42px);
  --h3: 21px;
  --stat: clamp(40px, 4.4vw, 64px);

  /* Kadence: alineem les seves variables globals amb els tokens */
  --global-palette1: var(--color-accent);
  --global-palette2: var(--color-accent-700);
  --global-palette3: var(--color-text);
  --global-palette4: var(--color-neutral-900);
  --global-palette5: var(--color-neutral-700);
  --global-palette6: var(--color-neutral-500);
  --global-palette7: var(--color-surface);
  --global-palette8: var(--color-bg);
  --global-palette9: var(--color-bg);
  --global-body-font-family: var(--font-body);
  --global-heading-font-family: var(--font-heading);
  --global-content-width: var(--container);
  --global-content-edge-padding: var(--edge);
  --global-content-boxed-padding: 0px;
}