/* ========================================================================== TOKENS — Don Camarón Reescrito el 28 de agosto de 2026 para que el sitio se parezca AL LOGO. QUÉ CAMBIÓ Y POR QUÉ Antes esto era negro y oro, estilo restaurante caro. El logo de Don Camarón no es eso: es un camarón con corona y puro, en un Lamborghini verde, con letras rojas y un sello azul marino. Un sitio elegante y silencioso encima de ese logo se ve como dos negocios distintos. La base de datos ui-ux-pro-max, para "Restaurant/Food Service" (products.csv fila 34), recomienda exactamente lo que el logo ya es: estilo "Vibrant & Block-based", colores cálidos rojo/oro. La versión anterior se había apartado de la base a propósito; ahora se vuelve a ella. COLORES DE MARCA — MEDIDOS DEL LOGO, no elegidos a ojo Se sacaron con ImageMagick, pixel por pixel, del archivo original: azul del sello rgb(1,26,56) #011A38 rojo de CAMARÓN rgb(215,22,5) #D71605 oro del rin rgb(229,183,46) #E5B72E naranja camarón rgb(252,93,2) #FC5D02 17-oct-2026 — LOGO NUEVO (R2 oro, marca\logo-oficial-r2-oro\). Es una sola tinta: oro sobre negro. Se midió el tono que más se repite en las letras: #D3A857. --oro pasó de #E5B72E a #D3A857 para que el nombre en la barra y las líneas finas empaten con el logo, y --oro-hondo pasó de #8A5206 a #7A5A1C (el mismo oro oscurecido). Contrastes en cada token. El azul y el rojo siguen siendo los del logo anterior: el nuevo no trae esos colores, y cambiar la paleta del sitio es otra decisión. DESVIACIONES RESPECTO A colors.csv fila 34 — las tres medidas, no supuestas 1. El rojo de la base es #DC2626; se usa el del logo #D71605 (5.24:1 con blanco encima, pasa AA). Son casi el mismo rojo y así el sitio empata con el logo impreso. 2. La base da el gris tenue en #64748B. Sobre el fondo #FEF2F2 eso da 4.35:1 y NO llega al mínimo de 4.5:1 para texto normal. Se sube a #5B6B7F (4.98:1). Medido con HERRAMIENTAS/contraste. 3. Se agrega el azul marino del logo como color de marca. La base no lo trae porque no conoce este logo. Va en barra, pie y paneles. OJO CON EL ROJO SOBRE AZUL #D71605 sobre #011A38 da 3.32:1: sirve para un borde o un título enorme, NO para texto normal. Cuando haga falta rojo sobre fondo oscuro se usa --rojo-claro #FF6B52 (6.20:1). Está medido; no lo cambies a ojo. REUTILIZABLE: para el siguiente restaurante se copia este archivo y se cambian los cuatro colores de marca y las dos fuentes. Lo demás aguanta. ========================================================================== */ /* Las tipografías son ARCHIVOS LOCALES, no un @import a Google. Si esto vuelve a ser un @import, el sitio deja de verse bien sin internet — que es justo cuando se enseña en el local de un cliente. Se enlaza fuentes/fuentes.css desde el HTML, antes que este archivo. */ :root { /* --- Marca, medidos del logo ------------------------------------------ */ --azul: #011A38; /* sello del logo. Barra, pie, paneles */ --azul-medio: #0E2A50; /* un escalón más claro, para tarjetas sobre azul */ --rojo: #D71605; /* las letras CAMARÓN. Botones y acentos */ --rojo-hondo: #A30A0B; /* la sombra del rojo. Estados :active */ --rojo-claro: #FF6B52; /* el ÚNICO rojo que se lee sobre azul (6.20:1) */ --oro: #D3A857; /* el oro del logo R2 (17-oct-2026). Sobre azul 7.88:1, sobre tinta 8.87:1, sobre azul-medio 6.49:1 */ --oro-hondo: #7A5A1C; /* el oro del logo oscurecido, legible en claro: blanco 6.35, #FEF2F2 5.81, crema 5.93 */ --naranja: #FC5D02; /* el camarón. Alertas simpáticas, no errores */ --verde: #7BC62D; /* el Lamborghini. Solo para "listo" y "abierto" */ --arena: #FFF3E2; /* el atardecer del logo. Bandas alternas */ /* --- Set semántico (17 tokens) — tema claro, el del sitio público ----- */ --color-primary: #D71605; --color-on-primary: #FFFFFF; --color-secondary: #011A38; --color-on-secondary: #FFFFFF; --color-accent: #7A5A1C; --color-on-accent: #FFFFFF; --color-background: #FEF2F2; --color-foreground: #011A38; --color-card: #FFFFFF; --color-card-foreground: #011A38; --color-muted: #FFF3E2; --color-muted-foreground: #5B6B7F; /* 4.98:1 — corregido, ver arriba */ --color-border: #F3CFC7; --color-destructive: #D71605; --color-on-destructive: #FFFFFF; --color-ring: #D71605; --color-success: #2F7D0F; /* verde legible sobre blanco */ /* --- Tipografía ------------------------------------------------------- 29 de agosto de 2026: se cambió de "Bold Statement" (Bebas Neue) a "Luxury Serif" — Cormorant + Montserrat (typography.csv fila 12: "luxury, high-end, elegant, refined, premium"). LA IDEA QUE ORDENA TODO EL DISEÑO El logo de Don Camarón es escandaloso a propósito: un camarón con corona y puro en un Lamborghini. No se puede hacer "elegante" el logo sin traicionar la marca. Lo que sí se puede es **callar todo lo demás**. Por eso: el logo es lo ÚNICO fuerte de la página. La tipografía se adelgaza, el espacio crece, el oro pasa de relleno a línea fina, y el rojo se guarda para un solo botón. Ese contraste — un logo ruidoso rodeado de silencio caro — es lo que se lee como premium. Bebas Neue competía con el logo; Cormorant lo deja hablar. CUIDADO CON CORMORANT: es un serif de trazo muy fino y contrastado. Se ve precioso grande y se deshace chico. Va SOLO en títulos grandes y en los precios. Todo lo que haya que leer de verdad va en Montserrat. */ --font-display: 'Cormorant', 'Georgia', 'Times New Roman', serif; --font-body: 'Montserrat', -apple-system, 'Segoe UI', system-ui, sans-serif; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1rem; --text-lg: 1.1875rem; --text-xl: 1.5rem; --text-2xl: 2.125rem; /* Escala fluida: crece con la pantalla sin media queries y sin px fijos. Sube respecto a la versión anterior: un serif fino necesita tamaño para que se le vea el trazo, y el tamaño grande es en sí mismo un gesto caro. */ --text-3xl: clamp(2.5rem, 1.7rem + 3.2vw, 4rem); --text-4xl: clamp(3.25rem, 2rem + 5.2vw, 6.5rem); --text-hero: clamp(3.5rem, 1.5rem + 8.2vw, 10rem); --leading-tight: 1.06; --leading-snug: 1.28; --leading-body: 1.75; /* más aire entre renglones: se lee más caro */ --tracking-wide: 0.16em; --tracking-wider: 0.34em; /* versalitas muy separadas, gesto editorial */ /* --- Espaciado y forma ------------------------------------------------ styles.csv fila 6 (Vibrant & Block-based) pide bloques grandes: separaciones de 48px o más y tipografía de 32px para arriba. */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-section: clamp(5.5rem, 10vw, 11rem); /* el espacio vacío es el material más caro */ /* Los radios BAJAN respecto a la versión anterior. Las esquinas muy redondas se leen amigables y baratas; las casi rectas se leen caras. La excepción es el logo y su recuadro, que conservan su forma redonda porque son la marca. */ --radius-sm: 2px; --radius: 4px; --radius-lg: 10px; --radius-pill: 999px; --radius-marca: 12px; /* solo para el recuadro del camarón */ --ancho-max: 1240px; --ancho-texto: 62ch; /* --- Movimiento (motion.csv: 150-300ms, con significado) -------------- */ --ease-suave: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-rebote: cubic-bezier(0.34, 1.42, 0.64, 1); /* Más lento que antes. La prisa se ve barata; lo caro se mueve despacio. Sigue dentro del rango de motion.csv para lo que responde a un clic. */ --dur-rapida: 220ms; --dur-media: 340ms; --dur-lenta: 760ms; /* Sombras largas y muy suaves, no bloques oscuros. Una sombra dura se ve de plantilla; una difusa y amplia se ve de estudio. */ --sombra-baja: 0 1px 2px rgba(1, 26, 56, 0.05), 0 4px 16px -8px rgba(1, 26, 56, 0.10); --sombra-media: 0 18px 44px -24px rgba(1, 26, 56, 0.30); --sombra-alta: 0 40px 90px -40px rgba(1, 26, 56, 0.45); /* El borde grueso de sello, como el del logo */ --trazo-sello: 3px solid var(--azul); } /* El sitio público es CLARO. Se declara para que el navegador pinte bien las barras de scroll y los controles nativos de formulario. */ :root { color-scheme: light; } /* ========================================================================== BLOQUES OSCUROS — el mecanismo que hace que el sitio sea "por bloques" styles.csv fila 6 (Vibrant & Block-based) pide franjas grandes de color que se alternen. Aquí eso se logra SIN reescribir ningún componente: se le pone la clase a la sección y los tokens semánticos cambian de valor dentro de ella. Todo lo que hay adentro — botones, listas, enlaces — se recolorea solo porque ya usaba `var(--color-…)` y nunca un hex suelto. Por eso importaba tanto no meter colores a mano en los componentes: es justo lo que permite cambiar de tema una sección completa con una clase.
fondo azul marino
fondo rojo REUTILIZABLE tal cual para cualquier sitio que herede estos tokens. ========================================================================== */ .bloque-azul { --color-background: var(--azul); --color-foreground: #FFFFFF; --color-card: var(--azul-medio); --color-card-foreground: #FFFFFF; --color-muted: var(--azul-medio); --color-muted-foreground: #B9C9DE; /* 10.34:1 sobre el azul — medido */ --color-border: rgba(211, 168, 87, 0.28); --color-accent: var(--oro); --color-on-accent: var(--azul); --color-destructive: var(--rojo-claro); /* el rojo del logo NO se lee aquí */ --gold: var(--oro); --gold-solid: var(--oro); --gold-dim: rgba(211, 168, 87, 0.30); background: var(--azul); color: var(--color-foreground); } .bloque-rojo { --color-background: var(--rojo); --color-foreground: #FFFFFF; --color-card: var(--rojo-hondo); --color-card-foreground: #FFFFFF; --color-muted: var(--rojo-hondo); --color-muted-foreground: #FFF2F0; /* 4.80:1 sobre el rojo. #FFE2DD daba 4.29 y NO pasaba */ --color-border: rgba(255, 255, 255, 0.26); --color-accent: #FFFFFF; --color-on-accent: var(--rojo); --gold: var(--oro); --gold-solid: var(--oro); --gold-dim: rgba(255, 255, 255, 0.3); background: var(--rojo); color: var(--color-foreground); } /* -------------------------------------------------------------------------- ALIAS DE COMPATIBILIDAD El CSS del sitio se escribió cuando la marca era negro y oro, y usa los nombres --gold, --gold-solid y --gold-dim en unas 62 reglas. En vez de reescribirlas una por una (y arriesgarse a romper el responsive que ya está probado), los nombres viejos siguen existiendo y apuntan al oro nuevo. Sobre fondo CLARO tienen que ser el oro oscuro, o el texto no alcanza el mínimo de contraste; dentro de .bloque-azul los pisa el oro brillante, que ahí sí se lee (9.24:1). -------------------------------------------------------------------------- */ :root { --gold: var(--oro-hondo); --gold-solid: var(--oro); --gold-deep: var(--oro-hondo); --gold-dim: rgba(122, 90, 28, 0.30); } /* ========================================================================== BLOQUE TINTA — el hero premium (opción D, 6 de septiembre de 2026) Raúl eligió una mezcla: la página ENTRA con la elegancia de un sitio caro —negro, oro, tipografía fina— y BAJA a una zona clara donde se leen los precios y se pide. El motivo no es estético: en un celular, en la calle y con sol, una carta sobre fondo negro no se lee. Lo elegante va donde se impresiona; lo claro va donde se decide. Este bloque es el azul marino llevado casi al negro. No es un color nuevo inventado: es el mismo --azul del sello del logo, oscurecido, para que el logo siga sintiéndose en casa encima. ========================================================================== */ .bloque-tinta { --color-background: #070C15; --color-foreground: #FFF6E9; --color-card: #0E1726; --color-card-foreground: #FFF6E9; --color-muted: #0E1726; --color-muted-foreground: #93A0B4; /* 7.1:1 sobre #070C15 — medido */ --color-border: rgba(211, 168, 87, 0.26); --color-accent: var(--oro); --color-on-accent: #2A1F00; --color-primary: var(--rojo); --color-on-primary: #FFFFFF; --color-destructive: var(--rojo-claro); --gold: var(--oro); --gold-solid: var(--oro); --gold-dim: rgba(211, 168, 87, 0.28); background: #070C15; color: var(--color-foreground); } /* BLOQUE CREMA — la zona donde se lee y se pide. El fondo arena del atardecer del logo, que da calidez sin gritar. */ .bloque-crema { --color-background: #FFF6E9; --color-foreground: var(--azul); --color-card: #FFFFFF; --color-card-foreground: var(--azul); --color-muted: #FFFFFF; --color-muted-foreground: #6C7C90; /* 5.4:1 sobre blanco — medido */ --color-border: #EEDFC6; background: #FFF6E9; color: var(--color-foreground); } /* ========================================================================== NEW RICH — 18 de octubre de 2026 Raúl: "me gustó, pero tiene mucho diseño anterior". El sitio entero pasa al lenguaje de la portada y de las dos secciones nuevas: tinta, oro y marfil. Sistema completo y el porqué en DON CAMARON/design-system/don-camaron/MASTER.md. Contrastes medidos con un script (fórmula WCAG), no a ojo: tinta #070C15 sobre marfil #F6F0E4 ......... 17.25:1 #55575F (secundario) sobre marfil ........... 6.35:1 (sobre #EDE4D3: 5.71) oro-hondo #7A5A1C sobre marfil .............. 5.60:1 rojo #D71605 sobre marfil ................... 4.62:1 (texto normal pasa AA) marfil sobre tinta .......................... 17.25:1 #A7AFBD (secundario) sobre tinta ............ 8.87:1 (sobre tinta-2: 8.13) oro sobre tinta ............................. 8.87:1 #8E7B53 (borde de control) sobre marfil ..... 3.62:1 (mínimo 3:1 para controles) ========================================================================== */ :root { --tinta: #070C15; /* el negro de la portada */ --tinta-2: #0E1726; /* tarjeta sobre tinta */ --marfil: #F6F0E4; /* el claro donde se lee y se decide */ --marfil-2: #EDE4D3; /* bandas y fondos de control sobre marfil */ --marfil-linea: #DCCFB6; /* separadores de adorno sobre marfil */ --linea-control: #8E7B53; /* borde de botones y campos sobre marfil (3.62:1) */ --texto-2-claro: #55575F; /* texto secundario sobre marfil (6.35:1) */ --texto-2-oscuro: #A7AFBD; /* texto secundario sobre tinta (8.87:1) */ --oro-linea: rgba(211, 168, 87, 0.30); /* el filo de oro de 1 px */ --oro-brillo: #E2BE78; /* hover del oro sobre tinta */ /* Curvas de la casa (direccion-de-arte / medios/animacion.md) */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); } /* Tinta: mismos valores que antes, ahora a partir de los tokens. */ .bloque-tinta { --color-background: var(--tinta); --color-foreground: var(--marfil); --color-card: var(--tinta-2); --color-card-foreground: var(--marfil); --color-muted: var(--tinta-2); --color-muted-foreground: var(--texto-2-oscuro); --color-border: var(--oro-linea); --color-ring: var(--oro); background: var(--tinta); } /* MARFIL — reemplaza al crema y al azul en las zonas de lectura. Texto en tinta completa; el oro baja a oro-hondo para seguir pasando AA. */ .bloque-marfil { --color-background: var(--marfil); --color-foreground: var(--tinta); --color-card: #FFFFFF; --color-card-foreground: var(--tinta); --color-muted: var(--marfil-2); --color-muted-foreground: var(--texto-2-claro); --color-border: var(--marfil-linea); --color-accent: var(--oro-hondo); --color-on-accent: #FFFFFF; --color-ring: var(--tinta); --gold: var(--oro-hondo); --gold-solid: var(--oro-hondo); --gold-dim: var(--marfil-linea); background: var(--marfil); color: var(--color-foreground); }