/* =======================================================================
   tokens.css — Restaurante Aitana · design system (F2a)
   -----------------------------------------------------------------------
   Custom properties: paleta EXACTA de DESIGN.md §2.2, tipografías, escala
   de espaciado, radios, sombras suaves y z-index. Única fuente de verdad
   de los valores: el resto de hojas SOLO consume estas variables.
   ======================================================================= */

:root {
    /* --- Paleta (DESIGN.md §2.2, valores exactos) --- */
    --tinta:        #14182A; /* marino noche: texto principal y fondos oscuros */
    --tinta-suave:  #3A3631; /* marrón oscuro secundario */
    --crema:        #F8F4ED; /* fondo claro principal */
    --crema-alt:    #EFE7DA; /* fondo claro alterno (bandas) */
    --marfil:       #FFFEFC; /* blanco cálido: tarjetas */
    --arena:        #D8C8B3; /* bordes, líneas, ornamentos */
    --tostado:      #A98F73; /* acentos secundarios, overlines sobre oscuro */
    --terracota:    #9D4A3F; /* acento cálido: hovers, detalles */
    --oliva:        #66785F; /* acento secundario muy puntual */
    --oro-viejo:    #B08D57; /* SOLO detalles finos: filetes, iconos, estrellas */

    /* --- Derivados de implementación (contrastes AA verificados; ver
           DESIGN.md "Ajustes de implementación") --- */
    --terracota-texto: #8A3F35; /* terracota oscurecida: overlines/texto pequeño cálido sobre claros (6.7:1 s/crema) */
    --tostado-claro:   #ECE0C8; /* oro pálido: overlines pequeños sobre IMAGEN/vídeo (AA sobre veil oscuro) */
    --texto:        var(--tinta);      /* cuerpo sobre claros (>15:1 s/crema) */
    --texto-suave:  #4A443D;           /* texto secundario sobre claros (8.7:1 s/crema) */
    --texto-claro:  var(--crema);      /* cuerpo sobre oscuros */
    --texto-claro-suave: rgba(248, 244, 237, 0.78); /* secundario sobre oscuros */
    --linea:        var(--arena);
    --linea-clara:  rgba(216, 200, 179, 0.28); /* filetes sobre oscuro */

    /* Velos sobre imagen/vídeo (garantizan AA del texto encima) */
    --veil-hero-top:    rgba(20, 24, 42, 0.52);
    --veil-hero-bottom: rgba(20, 24, 42, 0.82);
    --veil-playa:       rgba(20, 24, 42, 0.55);

    /* --- Tipografía --- */
    --fuente-display: "Playfair Display", Georgia, "Times New Roman", serif;
    --fuente-texto:   "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

    /* Escala tipográfica fluida */
    --fs-overline: 0.8125rem;                        /* 13px */
    --fs-cuerpo:   clamp(1rem, 0.96rem + 0.2vw, 1.125rem); /* 16→18px */
    --fs-cuerpo-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
    --fs-h3:  clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
    --fs-h2:  clamp(1.9rem, 1.4rem + 2.2vw, 3rem);
    --fs-h1:  clamp(2.5rem, 1.7rem + 3.4vw, 5.25rem); /* 40→84px */
    --lh-cuerpo: 1.6;
    --lh-display: 1.08;

    /* --- Escala de espaciado (base 8) --- */
    --e-1: 0.25rem;
    --e-2: 0.5rem;
    --e-3: 0.75rem;
    --e-4: 1rem;
    --e-5: 1.5rem;
    --e-6: 2rem;
    --e-7: 3rem;
    --e-8: 4rem;
    --e-9: 6rem;
    --e-10: 8rem;
    --seccion-y: clamp(3.5rem, 8vw, 8rem); /* padding vertical de sección */

    /* --- Contenedores --- */
    --ancho-max: 1240px;
    --ancho-texto: 62ch;
    --gutter: clamp(1.25rem, 5vw, 3rem);

    /* --- Radios (editorial: casi rectos) --- */
    --radio-xs: 2px;
    --radio-sm: 4px;
    --radio-md: 8px;
    --radio-pill: 999px;

    /* --- Sombras suaves --- */
    --sombra-sm: 0 2px 8px rgba(20, 24, 42, 0.06);
    --sombra-md: 0 12px 30px rgba(20, 24, 42, 0.10);
    --sombra-lg: 0 24px 60px rgba(20, 24, 42, 0.16);

    /* --- Movimiento --- */
    --ease-suave: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --dur-rapida: 0.25s;
    --dur-media:  0.45s;
    --dur-lenta:  0.8s;

    /* --- z-index --- */
    --z-base: 1;
    --z-header: 100;
    --z-menu-movil: 200;
    --z-flotante: 300;
    --z-skip: 400;

    --altura-header: 88px;
    --altura-header-scroll: 66px;

    /* --- Alias legado (compatibilidad con el shell del backoffice F0) --- */
    --color-marino: var(--tinta);
    --color-crema: var(--crema);
    --color-tierra: var(--tinta-suave);
    --color-arena: var(--tostado);
    --color-arena-clara: var(--crema-alt);
    --color-terracota: var(--terracota);
    --color-texto: var(--texto);
    --color-texto-suave: var(--texto-suave);
    --fuente-titulos: var(--fuente-display);
    --fuente-cuerpo: var(--fuente-texto);
}