/* ==========================================================================
   MallorcAmor — Design Tokens (fuente única de verdad)
   --------------------------------------------------------------------------
   Catálogo portable de tokens de diseño. Este archivo es la fuente:
   `public/design-tokens/tokens.json` se genera a partir de él con
   `scripts/tokens-build.mjs` (pnpm run tokens, o node scripts/tokens-build.mjs).
   Los nombres siguen la convención --<categoría>-<nombre>-<variante> para que
   la ruta del token en JSON se derive directamente del nombre.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     Color · primitivos de marca
     ------------------------------------------------------------------------ */
  --color-green-950: #14261b;   /* verde noche: secciones oscuras, hover */
  --color-green-900: #23402e;   /* verde MallorcAmor (marca) */
  --color-green-800: #2b4f38;
  --color-green-700: #2f5a43;   /* verde medio */
  --color-green-600: #3d7054;
  --color-green-200: #c4d3c0;
  --color-green-100: #e3ecdd;
  --color-green-50:  #f0f4ec;

  --color-lime-500: #bcc97f;
  --color-lime-400: #cddc94;    /* lima MallorcAmor (acento) */
  --color-lime-300: #dbe7ae;
  --color-lime-200: #e9f0c9;
  --color-lime-100: #f4f7e4;

  --color-cream:    #f2f1ea;    /* crema (superficie alterna) */
  --color-paper:    #fffefa;    /* papel (superficie base) */

  --color-ink-900:  #050505;    /* tinta principal */
  --color-ink-700:  #2c2c2a;
  --color-ink-500:  #55554f;    /* tinta atenuada (AAA sobre papel) */
  --color-ink-300:  #8a8a80;

  --color-morada-600: #6d3f8f;  /* marca morada (Navidad, temporada) */
  --color-morada-100: #f0e8f6;

  --color-success-700: #1c5a1c;
  --color-success-100: #e8f3e8;
  --color-error-700:  #8a1c1c;
  --color-error-100:  #f7e8e8;

  --color-focus:    #085e3f;    /* anillo de foco visible */

  /* ------------------------------------------------------------------------
     Color · roles semánticos (usar estos en componentes)
     ------------------------------------------------------------------------ */
  --color-surface:         #fffefa;   /* fondo base */
  --color-surface-alt:     #f2f1ea;   /* fondo alterno (crema) */
  --color-surface-tint:    #f0f4ec;   /* fondo tintado verde suave */
  --color-surface-inverse: #23402e;   /* fondo oscuro (verde marca) */
  --color-surface-night:   #14261b;   /* fondo oscuro profundo */

  --color-ink:             #050505;   /* texto sobre superficie clara */
  --color-ink-muted:       #55554f;   /* texto secundario sobre claro */
  --color-ink-inverse:     #fffefa;   /* texto sobre superficie oscura */
  --color-ink-inverse-muted: #c4d3c0; /* texto secundario sobre oscuro */

  --color-accent:          #23402e;   /* acción principal */
  --color-accent-hover:    #14261b;   /* acción principal hover */
  --color-accent-2:        #cddc94;   /* acento secundario (lima) */
  --color-on-accent:       #fffefa;   /* texto sobre acción principal */
  --color-on-accent-2:     #23402e;   /* texto sobre acento lima */

  --color-border:          #e3e2d8;   /* bordes sobre claro */
  --color-border-strong:   #c9c8bb;
  --color-border-inverse:  #3d5a48;   /* bordes sobre oscuro */

  --color-season:          #6d3f8f;   /* marca estacional (morada) */
  --color-feedback-ok:     #1c5a1c;
  --color-feedback-ok-bg:  #e8f3e8;
  --color-feedback-error:  #8a1c1c;
  --color-feedback-error-bg: #f7e8e8;

  /* ------------------------------------------------------------------------
     Tipografía · familias
     ------------------------------------------------------------------------ */
  --font-family-display: "TRJN DaVinci Text", "Georgia", serif;
  --font-family-logo:    "TAY Big Bird Regular", "TRJN DaVinci Text", "Georgia", serif;
  --font-family-sans:    "Inter", "system-ui", "-apple-system", "Segoe UI", "Arial", sans-serif;

  /* Tipografía · escala fluida (clamp: mínimo, preferido, máximo) */
  --font-size-xs:   0.75rem;                            /* 12 */
  --font-size-sm:   0.875rem;                           /* 14 */
  --font-size-base: 1rem;                               /* 16 */
  --font-size-md:   1.125rem;                           /* 18 */
  --font-size-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --font-size-xl:   clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --font-size-2xl:  clamp(1.9rem, 1.5rem + 2vw, 2.75rem);
  --font-size-3xl:  clamp(2.4rem, 1.8rem + 3vw, 3.8rem);
  --font-size-4xl:  clamp(3rem, 2.2rem + 4vw, 5rem);
  --font-size-hero: clamp(3.4rem, 2.2rem + 6vw, 6.5rem);

  /* Tipografía · peso, interlineado, tracking */
  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:   1.05;
  --line-height-snug:    1.2;
  --line-height-normal:  1.55;
  --line-height-relaxed: 1.7;

  --letter-spacing-caps:  0.12em;   /* micro-etiquetas en mayúsculas */
  --letter-spacing-wide:  0.06em;
  --letter-spacing-tight: -0.01em;

  /* ------------------------------------------------------------------------
     Espaciado · escala de 4 pt
     ------------------------------------------------------------------------ */
  --space-0:  0;
  --space-1:  0.25rem;   /* 4 */
  --space-2:  0.5rem;    /* 8 */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */
  --space-10: 8rem;      /* 128 */

  /* Espaciado · ritmo de página */
  --space-section: clamp(4.5rem, 3rem + 6vw, 8rem);  /* padding vertical de sección */
  --space-gutter:  clamp(1.25rem, 0.75rem + 2.5vw, 3rem); /* margen lateral fluido */

  /* ------------------------------------------------------------------------
     Radios
     ------------------------------------------------------------------------ */
  --radius-xs:   0.125rem;
  --radius-sm:   0.375rem;
  --radius-md:   0.75rem;
  --radius-lg:   1.25rem;
  --radius-xl:   2rem;
  --radius-pill: 999px;

  /* ------------------------------------------------------------------------
     Sombras (teñidas de verde marca)
     ------------------------------------------------------------------------ */
  --shadow-sm: 0 1px 2px rgba(20, 38, 27, 0.08);
  --shadow-md: 0 6px 20px rgba(20, 38, 27, 0.12);
  --shadow-lg: 0 18px 50px rgba(20, 38, 27, 0.18);
  --shadow-xl: 0 30px 80px rgba(20, 38, 27, 0.24);
  --shadow-focus: 0 0 0 3px #fffefa, 0 0 0 6px #085e3f;

  /* ------------------------------------------------------------------------
     Movimiento
     ------------------------------------------------------------------------ */
  --duration-1: 120ms;
  --duration-2: 220ms;
  --duration-3: 360ms;
  --duration-4: 640ms;
  --duration-5: 1000ms;

  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --easing-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --easing-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  --stagger: 70ms;   /* retardo incremental en revelados */

  /* ------------------------------------------------------------------------
     Diseño · contenedores, cabecera, capas, breakpoints
     ------------------------------------------------------------------------ */
  --container-sm: 46rem;    /* 736 — lectura larga */
  --container-md: 68.75rem; /* 1100 — contenido */
  --container-lg: 87.5rem;  /* 1400 — chrome (header/footer) */

  --header-height: 4.75rem; /* 76 */

  --z-base:   0;
  --z-sticky: 10;
  --z-header: 100;
  --z-menu:   200;
  --z-modal:  300;
  --z-skip:   400;

  /* Referencia para media queries (CSS no permite var() ahí; documentado) */
  --breakpoint-sm: 30rem;   /* 480 */
  --breakpoint-md: 48rem;   /* 768 */
  --breakpoint-lg: 64rem;   /* 1024 */
  --breakpoint-xl: 90rem;   /* 1440 */

  color-scheme: light;
}

/* Roles de interfaz añadidos para la migración. Los tokens originales no cambian. */
:root {
  --size-control: 2.75rem;
  --size-logo: 13.75rem;
  --size-swatch: 4.5rem;
  --border-width: 1px;
  --focus-width: 3px;
  --focus-offset: 3px;
  --decoration-offset: 0.18em;
  --ratio-photo: 4 / 3;
  --ratio-hero: 5 / 4;
  --duration-institutions-loop: 36000ms;
}