/* Amorán · tokens de diseño · v1.3
   Fuente: Manual de uso de marca (Órix Studio, invierno 2023) + Presentación Etapa 3.
   Los siete colores de marca son fijos. Los tonos derivados (50-900) existen solo para interfaz
   (fondos, bordes, estados) y nunca sustituyen a los colores de marca en piezas gráficas.
   Todo fondo suave nuevo se calcula con color-mix de tokens existentes: ningún matiz nuevo. */

:root {
  color-scheme: light; /* controles nativos (barras, selector de fecha) en claro; el tema oscuro lo cambia */
  /* ── Colores de marca (Pantone / hex del manual) ─────────────────────────── */
  --amr-verde:        #004945; /* Principal · Pantone 561 C (C90 M42 Y61 K50) */
  --amr-oliva:        #828726; /* Secundario 1 · Pantone 391 C */
  --amr-ambar:        #EDA100; /* Secundario 2 · Pantone 143 C */
  --amr-naranja:      #C75200; /* Secundario 3 · Pantone 159 C */
  --amr-crema:        #F2EBDB; /* Auxiliar 1 · Pantone Cool Gray 1 C */
  --amr-durazno:      #EFC295; /* Auxiliar 2 · Pantone 720 C */
  --amr-verde-noche:  #00332F; /* Fondo profundo (tono sobre tono del manual, lámina Fondos) */
  --amr-negro-80:     #333333; /* Escala de grises: IGP y símbolo al 80 % */
  --amr-negro-85:     #262626; /* Escala de grises: sello al 85 % */

  /* ── Escalas derivadas, solo interfaz ─────────────────────────────────────── */
  --verde-50:  #EAF2F0;  --verde-100: #D6E6E3;  --verde-200: #B3D0CB;
  --verde-300: #7FB0AB;  --verde-500: #1F6B66;  --verde-700: #004945;
  --verde-800: #003E3A;  --verde-900: #00332F;
  --crema-50:  #FAF7F0;  --crema-100: #F2EBDB;  --crema-200: #E8DEC7;  --crema-300: #D9CCAE;
  --oliva-100: #ECEDD4;  --oliva-500: #828726;  --oliva-700: #5E621A;
  --ambar-100: #FCEFCC;  --ambar-500: #EDA100;  --ambar-700: #B87C00;
  --naranja-100: #F7DCC9; --naranja-500: #C75200; --naranja-700: #9A3F00;
  --durazno-100: #F9E7D3; --durazno-300: #EFC295;

  /* ── Paleta de ILUSTRACIÓN (gráfica auxiliar "el árbol de Amorán") ────────────
     Versión final = manual de marca pp. 44-46 (colibríes, luciérnagas y acento por línea).
     Existe SOLO dentro de la ilustración; nunca como plasta, texto ni interfaz. */
  --ilu-cielo:        #CDE3E4;
  --ilu-colibri-cabeza: #478682; --ilu-colibri-pecho: #F4F2EC;
  --ilu-colibri-superfoods: #276177; --ilu-colibri-snacks: #A45890; --ilu-colibri-seeds: #5E4278;
  --ilu-arco-superfoods: #C9762C; --ilu-arco-snacks: #DAB86F; --ilu-arco-seeds: #66652D;
  --ilu-luciernaga-cuerpo: #183C37; --ilu-luciernaga-luz: #F2B58C; --ilu-luciernaga-luz-2: #F6D3B8;
  --ilu-copa-1:       #00332F;  --ilu-copa-2: #044540;  --ilu-copa-3: #0F5D57;  --ilu-copa-4: #277A73;  --ilu-copa-5: #7FBFB6;
  --ilu-tronco-1:     #352312;  --ilu-tronco-2: #4F381E;  --ilu-tronco-3: #60492B;
  --ilu-nuez-1:       #573F21;  --ilu-nuez-2: #84663C;  --ilu-nuez-3: #D7C09B;  --ilu-nuez-borde: #F2EBDC;
  --ilu-hoja-oliva-1: #384418;  --ilu-hoja-oliva-2: #5B6520;  --ilu-hoja-oliva-3: #6D7628;  --ilu-hoja-oliva-4: #9EA06E;
  --ilu-hoja-ambar-1: #9A6D33;  --ilu-hoja-ambar-2: #BE8916;  --ilu-hoja-ambar-3: #DE9C19;  --ilu-hoja-ambar-4: #F7B116;  --ilu-hoja-ambar-5: #E8C77E;
  --ilu-hoja-naranja-1: #A8652E; --ilu-hoja-naranja-2: #DF6C21; --ilu-hoja-naranja-3: #EC792D; --ilu-hoja-naranja-4: #F49454;
  --ilu-flor:         #7B5CA6;
  /* Solo en la versión previa (Etapa 3), ya no se usan: moras #6E4E96 #9C7BC4 #B79BD9, cápsulas #FCFFFF, libélulas #133835 / #B2D5BE */

  /* ── Marca asociada: La Nogalera (solo dentro de .amr-nogalera) ────────────── */
  --nogalera-cafe:    #513626;
  --nogalera-cafe-2:  #4B3521;
  --nogalera-dorado:  #BB9555;
  --nogalera-verde:   #0A9544;

  /* ── Semánticos, tema claro (crema) ───────────────────────────────────────── */
  --bg:               var(--crema-100);
  --bg-elevado:       var(--crema-50);
  --bg-hundido:       var(--crema-200);
  --bg-inverso:       var(--verde-900);
  --fg:               #0E2825;
  --fg-suave:         #4F6764;
  --fg-inverso:       var(--crema-100);
  --fg-inverso-suave: #B8CFCA;
  --linea:            rgba(0, 73, 69, 0.18);
  --linea-fuerte:     rgba(0, 73, 69, 0.38);
  --acento:           var(--verde-700);
  --acento-hover:     var(--verde-800);
  --acento-fg:        var(--crema-100);
  --acento-suave:     var(--verde-100);
  /* Foco: anillo ámbar como firma de marca, con anillo interior de contraste para pasar 3:1 en todas las superficies */
  --foco:             var(--ambar-500);
  --foco-contra:      var(--verde-900);
  --exito:            var(--oliva-500);   --exito-suave:   var(--oliva-100);
  --alerta:           var(--ambar-500);   --alerta-suave:  var(--ambar-100);
  --critico:          var(--naranja-700); --critico-suave: var(--naranja-100); /* naranja 700: no se confunde con el naranja de categoría */
  --info:             var(--verde-500);   --info-suave:    var(--verde-100);
  /* Texto y fondo suave por categoría y por estado: tonos 700 sobre tinte 100 en claro */
  --texto-seeds:      var(--oliva-700);   --fondo-seeds:      var(--oliva-100);
  --texto-snacks:     #7A5200;            --fondo-snacks:     var(--ambar-100);
  --texto-superfoods: var(--naranja-700); --fondo-superfoods: var(--naranja-100);
  --texto-exito:      var(--oliva-700);   --texto-alerta: #7A5200;   --texto-critico: var(--naranja-700);   --texto-info: var(--verde-500);
  /* Profundidad: "textura, no brillo". Bisel interior de 1 px en reposo; la sombra proyectada solo para lo que flota */
  --bisel:            inset 0 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1px 0 rgba(0, 51, 47, 0.05);
  --sombra-1:         0 1px 2px rgba(0, 51, 47, 0.08);
  --sombra-2:         0 8px 24px -8px rgba(0, 51, 47, 0.18);
  --sombra-flotante:  0 16px 48px -12px rgba(0, 51, 47, 0.28), 0 2px 6px rgba(0, 51, 47, 0.08);
  --velo:             rgba(0, 51, 47, 0.55);
  /* Grano de lápiz: solo en la capa de fondo de una superficie, nunca sobre la marca ni sobre texto */
  --grano-opacidad:   0.030;
  --grano:            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  /* Chevron del select como máscara sin color: hereda currentColor */
  --chevron-mask:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");

  /* ── Tipografía ───────────────────────────────────────────────────────────── */
  /* Larken (titulares, caja de oración, Medium y ExtraBold) · Arboria (textos, Medium e inferiores).
     Sustitutos web aprobados y en producción: Fraunces con SOFT 100 y Jost. Poppins solo en --font-nogalera. */
  --font-display:     "Larken", "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-text:        "Arboria", "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-mono:        ui-monospace, "SF Mono", Menlo, monospace;
  --font-nogalera:    "Poppins", "Jost", system-ui, sans-serif;
  --ejes-display:     "SOFT" 100, "WONK" 0; /* solo afecta al sustituto Fraunces; Larken los ignora */
  --peso-display-md:  500;  --peso-display-xb: 800;
  --peso-texto-light: 300;  --peso-texto-book: 400;  --peso-texto-md: 500;
  --track-etiqueta:   0.18em; /* tagline PURE SELECTION (siempre en inglés y en altas) y etiquetas */

  /* Escala 1.25 sobre 16 px. El 11 px es exclusivo de etiquetas de interfaz, nunca texto corrido. */
  --fs-2xs: 0.6875rem; --fs-xs: 0.75rem;  --fs-sm: 0.875rem; --fs-md: 1rem;    --fs-lg: 1.25rem;
  --fs-xl: 1.5625rem;  --fs-2xl: 1.953rem; --fs-3xl: 2.441rem; --fs-4xl: 3.052rem; --fs-5xl: 3.815rem;
  /* Rampa óptica: cuanto más grande el titular, menos interlínea y más apretado el interletraje */
  --lh-display: 1.02; --lh-h1: 1.06; --lh-h2: 1.10; --lh-h3: 1.16; --lh-h4: 1.22;
  --track-display: -0.022em; --track-h1: -0.018em; --track-h2: -0.012em; --track-h3: -0.006em; --track-h4: 0;
  --lh-titulo: var(--lh-h2); /* alias heredado */
  --lh-texto: 1.55; --lh-compacto: 1.3;
  /* Medidas calibradas para Jost: 46ch rinde ~65 caracteres reales (el ch mide el cero, que en Jost es ancho).
     Con Arboria instalada hay que volver a contar. */
  --ancho-lectura:    46ch;
  --ancho-entradilla: 36ch;

  /* ── Espacio, radios, medidas ─────────────────────────────────────────────── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-pill: 999px;
  --control-h: 44px; --control-h-sm: 36px; --control-h-lg: 52px;
  /* Retícula: 12 columnas, canal 24, márgenes 24 móvil / 32 escritorio, tres anchos */
  --columnas: 12;
  --canal: var(--sp-5);
  --margen-lateral: var(--sp-5);
  --ancho-estrecho: 720px;  /* lectura */
  --ancho-max: 1200px;      /* marketing */
  --ancho-app: 1440px;      /* tablero */
  /* Ritmo vertical: entre secciones / entre bloques / entre grupos / entre elementos */
  --ritmo-seccion: var(--sp-9); --ritmo-3: var(--sp-8); --ritmo-2: var(--sp-6); --ritmo-1: var(--sp-5);
  /* Capas: solo sistémicas */
  --z-base: 0; --z-elevado: 1; --z-sticky: 10; --z-menu: 20; --z-modal: 30; --z-toast: 40; --z-tooltip: 50;

  /* ── Movimiento (Emil Kowalski: curvas custom, ease-out para entrar, nunca ease-in en UI) ── */
  --ease-out:     cubic-bezier(0.23, 1, 0.32, 1);     /* entradas, hover, feedback: arranca rápido */
  --ease-in-out:  cubic-bezier(0.77, 0, 0.175, 1);    /* algo que se mueve o transforma en pantalla */
  --ease-drawer:  cubic-bezier(0.32, 0.72, 0, 1);     /* cajones, sheets, paneles (curva iOS) */
  --ease-suave:   cubic-bezier(0.16, 1, 0.3, 1);      /* revelado al hacer scroll, más largo y amable */
  --dur-presion:  120ms;   /* feedback de botón al presionar */
  --dur-hover:    160ms;   /* color, borde, sombra en hover */
  --dur-fila:     120ms;   /* hover de fila de tabla: se ve cien veces al día */
  --dur-tooltip:  150ms;
  --dur-menu:     200ms;   /* dropdown, select, popover */
  --dur-modal:    280ms;   /* modal, drawer, toast (entrada) */
  --dur-salida:   140ms;   /* la salida siempre más rápida que la entrada */
  --dur-revelado: 600ms;   /* entrada por scroll, decorativa; se anula con reduced-motion */
  --dur-tema:     220ms;   /* cambio claro/oscuro */
  --stagger:      50ms;    /* escalonado entre hermanos: 30-80 ms */
  --transicion: var(--dur-hover) var(--ease-out); /* atajo para propiedades de hover; nunca 'transition: all' */
}

@media (min-width: 721px) { :root { --margen-lateral: var(--sp-6); } }

/* ── Tandas semánticas: una superficie declara fondo, texto, línea y acento, y toma una tanda entera ── */
.amr-semantica-clara {
  --texto-seeds: var(--oliva-700);   --fondo-seeds: var(--oliva-100);
  --texto-snacks: #7A5200;           --fondo-snacks: var(--ambar-100);
  --texto-superfoods: var(--naranja-700); --fondo-superfoods: var(--naranja-100);
  --texto-exito: var(--oliva-700);   --texto-alerta: #7A5200;   --texto-critico: var(--naranja-700);   --texto-info: var(--verde-500);
  --exito-suave: var(--oliva-100);   --alerta-suave: var(--ambar-100);   --critico-suave: var(--naranja-100);   --info-suave: var(--verde-100);
  --foco-contra: var(--verde-900);
  --bisel: inset 0 1px 0 rgba(255, 255, 255, 0.70), inset 0 -1px 0 rgba(0, 51, 47, 0.05);
}
.amr-semantica-oscura {
  --texto-seeds: #C9CE7A;  --fondo-seeds: color-mix(in srgb, var(--oliva-500) 28%, var(--verde-900));
  --texto-snacks: #F5C65A; --fondo-snacks: color-mix(in srgb, var(--ambar-500) 24%, var(--verde-900));
  --texto-superfoods: #F0A070; --fondo-superfoods: color-mix(in srgb, var(--naranja-500) 28%, var(--verde-900));
  --texto-exito: #C9CE7A;  --texto-alerta: #F5C65A;  --texto-critico: #F5B08A;  --texto-info: #9CC7C2;
  --exito-suave: color-mix(in srgb, var(--oliva-500) 26%, var(--verde-900));
  --alerta-suave: color-mix(in srgb, var(--ambar-500) 22%, var(--verde-900));
  --critico-suave: color-mix(in srgb, var(--naranja-500) 26%, var(--verde-900));
  --info-suave: color-mix(in srgb, var(--verde-500) 34%, var(--verde-900));
  --foco-contra: var(--crema-100);
  --bisel: inset 0 1px 0 rgba(242, 235, 219, 0.08), inset 0 -1px 0 rgba(0, 51, 47, 0.45);
}

/* ── Tema oscuro: verde noche con crema, un fondo permitido por el manual, nunca una inversión ── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: var(--verde-900); --bg-elevado: #003E3A; --bg-hundido: #002A27; --bg-inverso: var(--crema-100);
    --fg: var(--crema-100); --fg-suave: #B8CFCA; --fg-inverso: #0E2825; --fg-inverso-suave: #4F6764;
    --linea: rgba(242, 235, 219, 0.24); --linea-fuerte: rgba(242, 235, 219, 0.40);
    --acento: var(--crema-100); --acento-hover: #FFFFFF; --acento-fg: var(--verde-900); --acento-suave: rgba(242, 235, 219, 0.10);
    --texto-seeds: #C9CE7A;  --fondo-seeds: color-mix(in srgb, var(--oliva-500) 28%, var(--verde-900));
    --texto-snacks: #F5C65A; --fondo-snacks: color-mix(in srgb, var(--ambar-500) 24%, var(--verde-900));
    --texto-superfoods: #F0A070; --fondo-superfoods: color-mix(in srgb, var(--naranja-500) 28%, var(--verde-900));
    --texto-exito: #C9CE7A;  --texto-alerta: #F5C65A;  --texto-critico: #F5B08A;  --texto-info: #9CC7C2;
    --exito-suave: color-mix(in srgb, var(--oliva-500) 26%, var(--verde-900));
    --alerta-suave: color-mix(in srgb, var(--ambar-500) 22%, var(--verde-900));
    --critico-suave: color-mix(in srgb, var(--naranja-500) 26%, var(--verde-900));
    --info-suave: color-mix(in srgb, var(--verde-500) 34%, var(--verde-900));
    --foco-contra: var(--crema-100);
    --bisel: inset 0 1px 0 rgba(242, 235, 219, 0.08), inset 0 -1px 0 rgba(0, 51, 47, 0.45);
    --sombra-1: 0 1px 2px rgba(0, 51, 47, 0.55);
    --sombra-2: 0 8px 24px -8px rgba(0, 51, 47, 0.75);
    --sombra-flotante: 0 16px 48px -12px rgba(0, 51, 47, 0.80), 0 2px 6px rgba(0, 51, 47, 0.45);
    --velo: rgba(0, 20, 18, 0.66);
    --grano-opacidad: 0.022;
    --track-etiqueta: 0.20em;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--verde-900); --bg-elevado: #003E3A; --bg-hundido: #002A27; --bg-inverso: var(--crema-100);
  --fg: var(--crema-100); --fg-suave: #B8CFCA; --fg-inverso: #0E2825; --fg-inverso-suave: #4F6764;
  --linea: rgba(242, 235, 219, 0.24); --linea-fuerte: rgba(242, 235, 219, 0.40);
  --acento: var(--crema-100); --acento-hover: #FFFFFF; --acento-fg: var(--verde-900); --acento-suave: rgba(242, 235, 219, 0.10);
  --texto-seeds: #C9CE7A;  --fondo-seeds: color-mix(in srgb, var(--oliva-500) 28%, var(--verde-900));
  --texto-snacks: #F5C65A; --fondo-snacks: color-mix(in srgb, var(--ambar-500) 24%, var(--verde-900));
  --texto-superfoods: #F0A070; --fondo-superfoods: color-mix(in srgb, var(--naranja-500) 28%, var(--verde-900));
  --texto-exito: #C9CE7A;  --texto-alerta: #F5C65A;  --texto-critico: #F5B08A;  --texto-info: #9CC7C2;
  --exito-suave: color-mix(in srgb, var(--oliva-500) 26%, var(--verde-900));
  --alerta-suave: color-mix(in srgb, var(--ambar-500) 22%, var(--verde-900));
  --critico-suave: color-mix(in srgb, var(--naranja-500) 26%, var(--verde-900));
  --info-suave: color-mix(in srgb, var(--verde-500) 34%, var(--verde-900));
  --foco-contra: var(--crema-100);
  --bisel: inset 0 1px 0 rgba(242, 235, 219, 0.08), inset 0 -1px 0 rgba(0, 51, 47, 0.45);
  --sombra-1: 0 1px 2px rgba(0, 51, 47, 0.55);
  --sombra-2: 0 8px 24px -8px rgba(0, 51, 47, 0.75);
  --sombra-flotante: 0 16px 48px -12px rgba(0, 51, 47, 0.80), 0 2px 6px rgba(0, 51, 47, 0.45);
  --velo: rgba(0, 20, 18, 0.66);
  --grano-opacidad: 0.022;
  --track-etiqueta: 0.20em;
}