/* ========================================================================== AEREHO · Paletas alternativas -------------------------------------------------------------------------- La página funciona con variables de color, así que cambiar de paleta NO necesita otra versión del sitio: basta un atributo en la etiqueta . café y caramelo quemado grafito y naranja vivo verde bosque y hueso cobalto (el original) Para comparar sin tocar código, abre la página con ?tema=cafe, ?tema=naranja, ?tema=verde o ?tema=cobalto. La lista está en temas.html. Cada paleta define su versión clara y su versión oscura, y respeta las dos reglas del sistema: un solo acento por página, y contraste mínimo AA. --accent = rellenos (botones, fondos, bordes activos) --accent-ink = el mismo acento cuando es texto o icono sobre fondo claro ========================================================================== */ /* ========================================================================== TEMA CAFÉ Espresso, arena tostada y caramelo quemado. El más cálido y el más cercano a "hogar". Contra: es la paleta más vista en artículos para el hogar, así que diferencia menos que las otras dos. ========================================================================== */ :root[data-tema="cafe"]{ --paper: #F3EFE9; --surface: #FCFAF6; --surface-2: #E8E0D5; --ink: #221A14; --ink-soft: #4A3C31; --steel: #6E5E50; --line: #DFD5C7; --line-strong:#C8BAA8; --accent: #9A4A18; --accent-ink: #8A4115; --accent-hover:#7C3A11; --accent-soft: rgba(154, 74, 24, .10); --on-accent: #FFFFFF; --ink-bg: #1C1410; --ink-bg-2: #261D17; --ink-line: #3B2E25; --ink-text: #F6F0E8; --ink-muted: #AC9885; --shadow-sm: 0 1px 2px rgba(58, 40, 26, .06); --shadow-md: 0 10px 24px -12px rgba(58, 40, 26, .26); --shadow-lg: 0 28px 60px -28px rgba(58, 40, 26, .36); } @media (prefers-color-scheme: dark){ :root[data-tema="cafe"]{ --paper: #12100D; --surface: #1B1814; --surface-2: #241F1A; --ink: #F1E9E0; --ink-soft: #CBBEB0; --steel: #9A8A7A; --line: #2C261F; --line-strong:#3A3229; --accent: #E08A4E; --accent-ink: #EDA470; --accent-hover:#EDA470; --accent-soft: rgba(224, 138, 78, .14); --on-accent: #1A0F06; --ink-bg: #16120E; --ink-bg-2: #201A15; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow-md: 0 10px 24px -12px rgba(0, 0, 0, .65); --shadow-lg: 0 28px 60px -28px rgba(0, 0, 0, .78); } } /* ========================================================================== TEMA NARANJA Grafito neutro con naranja vivo. El naranja va sobre gris frío, no sobre beige: así se ve energía, no rústico. El botón lleva texto casi negro encima del naranja, que es lo que lo hace legible y lo que le da el aire caro en vez de aire de oferta de supermercado. ========================================================================== */ :root[data-tema="naranja"]{ --paper: #F4F3F1; --surface: #FCFCFA; --surface-2: #E9E7E3; --ink: #191713; --ink-soft: #423E37; --steel: #6B665D; --line: #DEDBD5; --line-strong:#C8C4BC; --accent: #EA5B18; --accent-ink: #A63D08; --accent-hover:#CF4D11; --accent-soft: rgba(234, 91, 24, .11); --on-accent: #1A0E05; --ink-bg: #16130E; --ink-bg-2: #201C15; --ink-line: #332E24; --ink-text: #F5F2EC; --ink-muted: #A79E90; --shadow-sm: 0 1px 2px rgba(40, 33, 25, .06); --shadow-md: 0 10px 24px -12px rgba(40, 33, 25, .24); --shadow-lg: 0 28px 60px -28px rgba(40, 33, 25, .34); } @media (prefers-color-scheme: dark){ :root[data-tema="naranja"]{ --paper: #100F0D; --surface: #191713; --surface-2: #221F1A; --ink: #F2EFE9; --ink-soft: #CBC5B9; --steel: #968F83; --line: #292620; --line-strong:#37332B; --accent: #FF7A33; --accent-ink: #FF9257; --accent-hover:#FF9257; --accent-soft: rgba(255, 122, 51, .15); --on-accent: #1A0B02; --ink-bg: #14120E; --ink-bg-2: #1E1A15; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow-md: 0 10px 24px -12px rgba(0, 0, 0, .65); --shadow-lg: 0 28px 60px -28px rgba(0, 0, 0, .78); } } /* ========================================================================== TEMA VERDE PREMIUM Verde bosque profundo sobre hueso. Es el más caro de los tres y el que mejor lee como "cocina limpia". Ojo: el botón de WhatsApp de la página es negro a propósito, para que no aparezcan dos verdes peleando. ========================================================================== */ :root[data-tema="verde"]{ --paper: #F1F4F0; --surface: #FAFCF9; --surface-2: #E3E9E0; --ink: #111710; --ink-soft: #374135; --steel: #5F6B5C; --line: #D6DDD2; --line-strong:#BFC9BA; --accent: #1E5B3C; --accent-ink: #1B5336; --accent-hover:#17452D; --accent-soft: rgba(30, 91, 60, .10); --on-accent: #FFFFFF; --ink-bg: #0F1610; --ink-bg-2: #182117; --ink-line: #28332A; --ink-text: #EDF3EB; --ink-muted: #94A390; --shadow-sm: 0 1px 2px rgba(20, 38, 26, .06); --shadow-md: 0 10px 24px -12px rgba(20, 38, 26, .24); --shadow-lg: 0 28px 60px -28px rgba(20, 38, 26, .34); } @media (prefers-color-scheme: dark){ :root[data-tema="verde"]{ --paper: #0A0D0A; --surface: #131813; --surface-2: #1B211A; --ink: #E9F0E7; --ink-soft: #BFC9BC; --steel: #8B9689; --line: #232A22; --line-strong:#31392F; --accent: #4FB07B; --accent-ink: #6FC694; --accent-hover:#6FC694; --accent-soft: rgba(79, 176, 123, .15); --on-accent: #04120A; --ink-bg: #0E140F; --ink-bg-2: #161D16; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .45); --shadow-md: 0 10px 24px -12px rgba(0, 0, 0, .65); --shadow-lg: 0 28px 60px -28px rgba(0, 0, 0, .78); } }