/*
 * Design Tokens
 *
 * This file contains CSS custom properties (variables) for colors,
 * spacing, typography and other design tokens.  Defining variables
 * centrally makes the theme easy to tweak and ensures consistency.
 */

 

:root {

  /* ==========================================================================
   LEGACY ALIASES (perquè el CSS antic no es trenqui)
   ========================================================================== */

/* Fonts legacy */
--font-family-base: var(--font-body);
--font-family-heading: var(--font-display);

/* Weights legacy */
--font-weight-normal: var(--fw-regular);
--font-weight-bold: var(--fw-bold);

/* Label-s legacy (nav) */
--font-size-label-s: var(--fs-label);        /* 14px */
--line-height-label-s: var(--lh-ui);         /* 1.3 */
--letter-spacing-label-s: var(--ls-label);   /* 0.02em */
--font-weight-label-s: var(--fw-semibold);   /* 600 */

/* Muted legacy */
--color-text-muted: color-mix(in srgb, var(--color-text), white 35%);


  /* ==========================================================================
   LEGACY ALIASES (per no trencar CSS antic mentre migres)
   ========================================================================== */
--font-family-base: var(--font-body);
--font-family-heading: var(--font-display);

--font-weight-normal: var(--fw-regular);
--font-weight-bold: var(--fw-bold);

/* si tens llocs que usen aquest nom */
--color-text-muted: color-mix(in srgb, var(--color-text), white 35%);


    /* Brand y color de texto */
    --color-text: #46433d;         /* Color principal para el cuerpo de texto */
    --color-brand: #c3a06e;        /* Color corporativo principal */
    --color-text-inverted: #fcfaf3;        /* Color corporativo principal */
  
    /* Paleta de fondos */
    --color-bg-soft: #fcfaf3;      /* Fondo muy claro para secciones */
    --color-bg-medium: #f2e9db;    /* Fondo medio para tarjetas/secciones */
    --color-bg-hard: #ddba87;      /* Fondo más oscuro para acentos */
    --color-bg-light:#ffffff;
  
    /* Superficie y borde */
    --color-surface: var(--color-bg-medium);
    --color-background: var(--color-bg-soft);
    --color-border: #e0d6c6;
 
  
    /* Accentos e interacciones */
    --color-primary: var(--color-brand);
    --color-secondary: #46433d;    /* Color secundario (derivado de Metabolic Control) */
    --color-accent: #ee9d26;       /* Acento destacado (de Mood Balance) */
    --color-focus-outline: #1d2999;/* Color del contorno de foco (legible y de marca) */
  
    /* Colores específicos de productos */
    --product-sleep-well-bg: #8489c9;
    --product-sleep-well-text: #1d2999;
  
    --product-mood-balance-bg: #ee9d26;
    --product-mood-balance-text: #ee9d26;
  
    --product-cellular-energy-bg: #c3a06e;
    --product-cellular-energy-text: #c3a06e;
  
    --product-cellular-regen-bg: #7e9aa0;
    --product-cellular-regen-text: #034459;
  
    --product-metabolic-control-bg: #aca5c5;
    --product-metabolic-control-text: #645a99;
  
    --product-move-and-forza-bg: #e3998d;
    --product-move-and-forza-text: #c74234;


      /* ==========================================================================
         TYPE · Families
         ========================================================================== */
      --font-body: 'Inter', 'Segoe UI', sans-serif;
      --font-display: 'Manrope', sans-serif;
    
      /* ==========================================================================
         TYPE · Weights
         ========================================================================== */
      --fw-regular: 400;
      --fw-medium: 500;
      --fw-semibold: 600;
      --fw-bold: 700;
    
      /* ==========================================================================
         TYPE · Line-heights (globals)
         ========================================================================== */
      --lh-tight: 1.08;
      --lh-heading: 1.5;
      --lh-body: 1.6;
      --lh-ui: 1.3;
    
      /* ==========================================================================
         TYPE · Display (marketing / hero)
         ========================================================================== */
      --fs-display-xl: clamp(44px, 4.2vw, 64px);
      --fs-display-lg: clamp(38px, 3.4vw, 52px);
      --fs-display-md: clamp(32px, 2.8vw, 44px);
      --fs-display-sm: clamp(28px, 2.2vw, 36px);
      --fs-display-xs: clamp(24px, 1.9vw, 30px);
      --fs-display-xxs: clamp(22px, 1.6vw, 26px);
    
      /* Letter-spacing per display (ajusta si cal) */
      --ls-display: -0.03em;
    
      /* ==========================================================================
         TYPE · Headings (estructura de pàgina)
         ========================================================================== */
      --fs-h1: clamp(22px, 2.2vw, 30px);
      --fs-h2: clamp(18px, 1.6vw, 22px);
      --fs-h3: clamp(16px, 1.2vw, 18px);
      --fs-h4: clamp(14px, 1.2vw, 16px);
    
      --ls-h1: 0.025em; /* aprox -1px a 40px */
      --ls-h2: 0.02em;
      --ls-h3: 0.015em;
      --ls-h4: 0.01em;
    
      /* ==========================================================================
         TYPE · Body (lectura)
         ========================================================================== */
      --fs-body-lg: clamp(18px, 1.4vw, 20px); /* lead / intro */
      --fs-body: clamp(14px, 1.2vw, 16px);    /* normal */
      --fs-body-sm: 0.9375rem;                /* 15px */
      --fs-caption: 0.875rem;                 /* 14px */
      --fs-footnote: 0.8125rem;               /* 13px */
    
      /* ==========================================================================
         TYPE · UI / Labels (navegació, botons, tags)
         ========================================================================== */
      --fs-label-lg: 0.9375rem;               /* 15px */
      --fs-label: 0.875rem;                   /* 14px */
      --fs-label-sm: 0.8125rem;               /* 13px */
    
      --ls-label: 0.02em;
      --ls-eyebrow: 0.06em;
    
      /* Eyebrow / kicker */
      --fs-eyebrow: 13px;
    
      /* ==========================================================================
         OPTIONAL · Measure (amplada lectura)
         ========================================================================== */
      --measure: 68ch;




      /* Spacing */
--space-xxs: 0.25rem;
--space-xs: 0.5rem;
--space-sm: 0.75rem;
--space-md: 1rem;
--space-lg: 1.5rem;
--space-xl: 2rem;
--space-xxl: 3rem;

/* Alias legacy (si encara uses --spacing-*) */
--spacing-xxs: var(--space-xxs);
--spacing-xs: var(--space-xs);
--spacing-sm: var(--space-sm);
--spacing-md: var(--space-md);
--spacing-lg: var(--space-lg);
--spacing-xl: var(--space-xl);
--spacing-xxl: var(--space-xxl);


/* ==========================================================================
   RADIUS
   ========================================================================== */
   --radius-0: 0px;
   --radius-xs: 4px;
   --radius-sm: 8px;
   --radius-md: 12px;
   --radius-lg: 16px;
   --radius-xl: 24px;
   --radius-2xl: 32px;
   --radius-pill: 999px;
   


    }