/*
  Blendtail — Design tokens
  Fuente: Brandbook Blendtail (paleta de color, p.10) y Etiqueta Blendtail V2.
  Los cinco colores base son los valores HEX oficiales del manual de marca.
  Los tonos derivados (mix con blanco/negro) se generan con color-mix() para
  cubrir estados de interfaz (hover, fondos sutiles) sin inventar nuevos
  colores de marca.
*/

:root {
  /* ---- Paleta oficial (Brandbook p.10) ---- */
  --brand-orange: #ea6029;      /* CMYK 1,73,89,0 — color distintivo */
  --brand-ink: #102020;         /* CMYK 87,62,62,78 — verde casi negro */
  --brand-teal: #274b4f;        /* CMYK 82,48,51,47 — verde sobrio */
  --brand-mint: #d2e4e3;        /* CMYK 22,4,13,0 — claro frío */
  --brand-cream: #f3ece7;       /* CMYK 6,8,9,0 — claro cálido */

  /* ---- Tonos derivados de interfaz (no oficiales de marca) ---- */
  --brand-orange-soft: color-mix(in srgb, var(--brand-orange) 14%, var(--brand-cream));
  --brand-orange-strong: color-mix(in srgb, var(--brand-orange) 82%, black);
  --brand-teal-soft: color-mix(in srgb, var(--brand-teal) 10%, white);
  --brand-teal-strong: color-mix(in srgb, var(--brand-teal) 70%, var(--brand-ink));
  --brand-ink-soft: color-mix(in srgb, var(--brand-ink) 85%, var(--brand-teal));
  --brand-mint-soft: color-mix(in srgb, var(--brand-mint) 55%, white);
  --hairline: color-mix(in srgb, var(--brand-teal) 22%, transparent);
  --hairline-on-dark: color-mix(in srgb, var(--brand-mint) 24%, transparent);

  /* ---- Superficie / texto ---- */
  --surface-light: var(--brand-cream);
  --surface-light-alt: var(--brand-mint-soft);
  --surface-dark: var(--brand-ink);
  --surface-dark-alt: var(--brand-teal);
  --text-on-light: var(--brand-ink);
  --text-on-light-muted: color-mix(in srgb, var(--brand-ink) 62%, var(--brand-cream));
  --text-on-dark: var(--brand-cream);
  --text-on-dark-muted: color-mix(in srgb, var(--brand-mint) 78%, var(--brand-ink) 10%);
  --text-accent: var(--brand-orange);

  /* ---- Tipografía ----
     Elms Sans (fuente oficial, Brandbook p.12) no se distribuye entre los
     archivos suministrados. Se sustituye por Manrope: comparte la misma
     lógica de dos extremos de peso (ExtraLight / SemiBold) sobre una
     construcción geométrica. Ver README para la nota de reemplazo. */
  --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;

  --weight-extralight: 200;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Escala tipográfica fluida */
  --fs-display: clamp(2.75rem, 2rem + 3.6vw, 6rem);
  --fs-h1: clamp(2.25rem, 1.7rem + 2.6vw, 4.25rem);
  --fs-h2: clamp(1.9rem, 1.55rem + 1.6vw, 3.1rem);
  --fs-h3: clamp(1.4rem, 1.2rem + 0.9vw, 2rem);
  --fs-lead: clamp(1.125rem, 1rem + 0.5vw, 1.5rem);
  --fs-body: clamp(1rem, 0.94rem + 0.2vw, 1.125rem);
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- Espaciado ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3.25rem;
  --space-xl: 5.5rem;
  --space-2xl: 8.5rem;

  --container-max: 1320px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 4vw, 4rem);

  /* ---- Forma / profundidad ---- */
  --radius-sm: 2px;
  --radius-md: 6px;
  --radius-lg: 22px 4px 22px 4px; /* corte asimétrico, evita el "card genérico" */
  --shadow-soft: 0 1px 2px color-mix(in srgb, var(--brand-ink) 8%, transparent);
  --shadow-lift: 0 20px 44px -24px color-mix(in srgb, var(--brand-ink) 55%, transparent);

  /* ---- Textura ----
     Patrón editorial propio (líneas de estela) inspirado en el concepto de
     "estela aromática en movimiento" del símbolo (Brandbook p.7), sin
     reproducir el isotipo oficial. No sustituye el Patrón de Marca real
     (Brandbook p.14), que requiere el archivo vectorial del isotipo. */
  --scent-pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='340' viewBox='0 0 340 340'%3E%3Cg fill='none' stroke='%23EA6029' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M-20 60 C 60 10, 120 110, 200 60 S 340 10, 400 60'/%3E%3Cpath d='M-20 180 C 60 130, 120 230, 200 180 S 340 130, 400 180'/%3E%3Cpath d='M-20 300 C 60 250, 120 350, 200 300 S 340 250, 400 300'/%3E%3C/g%3E%3C/svg%3E");

  /* ---- Movimiento ---- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 220ms;
  --duration-base: 480ms;
  --duration-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}