/* ============================================================================= TOKENS DE MARCA — CARRAO RESTAURANT ----------------------------------------------------------------------------- Cliente: Carrao Restaurant — parrilla y bar latino, Dallas TX Proyecto: Migracion de Elementor al CC System · Concepto Creativo · 2026 TODOS LOS VALORES SALEN DEL CSS REAL de las secciones que ya estaban construidas. No hay ni un color, radio, duracion ni ancho propuesto: se extrajeron, se consolidaron los duplicados y se midieron los contrastes. COMO ALTERNA EL SITIO La base es OSCURA: fondo carbon, tinta crema. Las secciones claras (antojos, complementos, bodega) son la inversion, y se piden con .cc-section--dark, que en el chasis significa "invertida", no "oscura literal". Ver docs/TOKENS.md. ============================================================================= */ :root { /* ---------- PRIMITIVOS DE MARCA ---------- Un bloque NUNCA los usa directamente. */ --cc-c-char: #0c0a07; /* carbon: fondo base del sitio */ --cc-c-soot: #0a0805; /* hollin: velos degradados sobre foto */ --cc-c-ember: #1a1410; /* brasa: fondo de tarjeta sobre oscuro */ --cc-c-cocoa: #1a1208; /* cacao: panel oscuro y tinta sobre crema */ --cc-c-line-dark: #2a1f12; /* filete sobre oscuro */ --cc-c-cream: #f2e8d5; /* crema: tinta sobre oscuro y fondo claro */ --cc-c-cream-line: #c9b89a; /* filete sobre crema */ --cc-c-dust: #9a8a75; /* texto secundario sobre oscuro */ --cc-c-fire: #e8730a; /* naranja fuego: color de marca */ --cc-c-fire-text: #a84b03; /* fuego legible como TEXTO sobre crema */ --cc-c-amber: #f5a623; /* ambar: acento */ --cc-c-white: #ffffff; /* ---------- COLOR ---------- */ --cc-bg: var(--cc-c-char); --cc-bg-alt: var(--cc-c-ember); --cc-surface: var(--cc-c-ember); --cc-ink: var(--cc-c-cream); --cc-ink-soft: var(--cc-c-dust); --cc-ink-inverse: var(--cc-c-cocoa); --cc-brand: var(--cc-c-fire); --cc-brand-2: var(--cc-c-fire-text); --cc-accent: var(--cc-c-amber); --cc-line: var(--cc-c-line-dark); --cc-overlay: color-mix(in srgb, var(--cc-c-soot) 92%, transparent); /* NOTA DE CONTRASTE — medido con la formula WCAG 2.1, no estimado. --cc-ink sobre --cc-bg → 16.27:1 AAA --cc-ink sobre --cc-surface → 15.01:1 AAA --cc-ink-soft sobre --cc-bg → 5.90:1 AA --cc-ink-soft sobre --cc-surface → 5.44:1 AA --cc-brand sobre --cc-bg → 6.49:1 AA --cc-accent sobre --cc-bg → 9.76:1 AAA --cc-ink-inverse sobre crema → 15.24:1 AAA TRES FALLOS DEL DISENO ANTERIOR, medidos y corregidos al migrar: 1. blanco sobre --cc-brand → 3.05:1 FALLA. Todos los botones naranjas llevaban texto blanco. El texto de un boton naranja va en --cc-ink-inverse (cacao), que da 6.07:1. 2. --cc-brand sobre crema → 2.51:1 FALLA. Los rotulos naranjas de las secciones claras (11px, versalitas) eran ilegibles. En seccion clara el naranja de texto es --cc-brand-2 (4.70:1). 3. #7A6A55 sobre --cc-bg → 3.79:1 FALLA. Usado en la nota de la bodega y el indicador de scroll. Sustituido por --cc-ink-soft (5.90:1). */ /* ---------- TIPOGRAFIA ---------- Los nombres coinciden con los @font-face de style.css. Pesos embarcados: Playfair 700-900 (variable), Playfair cursiva 400-700 (variable), Montserrat 400 y 600 (estaticos). Ningun bloque puede pedir un peso fuera de esos rangos. POR QUE MONTSERRAT Y NO BARLOW CONDENSED (cambio de oct-2026) El cuerpo del sitio era Barlow Condensed, que es una condensada: letras estrechas y altas, dibujada para titulares y espacios apretados. Usada como texto corrido daba justo el defecto que se veia en el checkout — todo alto y pesado — y encima no se parecia al "RESTAURANT" del logo, que es una geometrica ancha y fina. Montserrat tiene esa misma construccion geometrica abierta, se lee bien en los tamanos pequenos donde viven los precios y las direcciones, y pesa algo menos que lo que sustituye. Playfair no se toca: sigue siendo la voz de los titulares. */ --cc-font-display: "Playfair Display", Georgia, "Times New Roman", serif; --cc-font-body: "Montserrat", system-ui, -apple-system, sans-serif; --cc-weight-display: 900; /* los titulares del sitio son Playfair Black */ --cc-weight-body: 400; /* 600 y no 700: en una geometrica ancha el bold llena demasiado, sobre todo en mayusculas con tracking. El semibold marca la jerarquia sin gritar. */ --cc-weight-label: 600; /* rotulos, botones, nombres de tarjeta */ --cc-tracking-display: -0.01em; --cc-leading-display: 1.05; --cc-leading-body: 1.6; /* Escala fluida estandar del sistema. */ --cc-text-xs: clamp(0.75rem, 0.73rem + 0.09vw, 0.8125rem); --cc-text-sm: clamp(0.875rem, 0.85rem + 0.10vw, 0.9375rem); --cc-text-base: clamp(1rem, 0.97rem + 0.14vw, 1.0625rem); --cc-text-lg: clamp(1.125rem, 1.08rem + 0.21vw, 1.25rem); --cc-text-xl: clamp(1.25rem, 1.16rem + 0.42vw, 1.5rem); --cc-text-2xl: clamp(1.5rem, 1.315rem + 0.83vw, 2rem); --cc-text-3xl: clamp(1.875rem, 1.644rem + 1.04vw, 2.5rem); --cc-text-4xl: clamp(2.25rem, 1.88rem + 1.67vw, 3.25rem); --cc-text-5xl: clamp(2.75rem, 2.102rem + 2.92vw, 4.5rem); --cc-text-6xl: clamp(3.25rem, 2.231rem + 4.58vw, 6rem); /* ---------- FORMA ---------- CERO RADIO, extraido del diseno: no hay una sola esquina redondeada en todo el sitio. Es lo que le da el aire de carta impresa. Si aparece un border-radius en una seccion migrada, es ruido heredado. */ --cc-radius-sm: 0px; --cc-radius: 0px; --cc-radius-lg: 0px; --cc-radius-pill: 999px; /* reservado: hoy no se usa en ninguna seccion */ --cc-border-width: 1px; /* ---------- ELEVACION ---------- El sitio no usa sombras neutras: usa el halo naranja en hover y el escalon de superficie para la profundidad. Las sombras de abajo quedan para las secciones invertidas y para lo que venga despues. */ --cc-shadow-sm: 0 1px 2px -1px color-mix(in srgb, var(--cc-c-char) 42%, transparent), 0 3px 8px -2px color-mix(in srgb, var(--cc-c-char) 32%, transparent); --cc-shadow: 0 2px 4px -2px color-mix(in srgb, var(--cc-c-char) 44%, transparent), 0 12px 36px -8px color-mix(in srgb, var(--cc-c-char) 52%, transparent); --cc-shadow-lg: 0 4px 8px -4px color-mix(in srgb, var(--cc-c-char) 48%, transparent), 0 30px 64px -16px color-mix(in srgb, var(--cc-c-char) 62%, transparent); /* ---------- ESPACIADO ---------- Esta escala no cambia por marca. Es el ritmo del sistema. */ --cc-space-unit: 8px; --cc-space-1: calc(var(--cc-space-unit) * 0.5); /* 4px */ --cc-space-2: calc(var(--cc-space-unit) * 1); /* 8px */ --cc-space-3: calc(var(--cc-space-unit) * 1.5); /* 12px */ --cc-space-4: calc(var(--cc-space-unit) * 2); /* 16px */ --cc-space-5: calc(var(--cc-space-unit) * 3); /* 24px */ --cc-space-6: calc(var(--cc-space-unit) * 4); /* 32px */ --cc-space-7: calc(var(--cc-space-unit) * 5); /* 40px */ --cc-space-8: calc(var(--cc-space-unit) * 6); /* 48px */ --cc-space-9: calc(var(--cc-space-unit) * 7); /* 56px */ --cc-space-10: calc(var(--cc-space-unit) * 8); /* 64px */ --cc-space-11: calc(var(--cc-space-unit) * 10); /* 80px */ --cc-space-12: calc(var(--cc-space-unit) * 12); /* 96px */ --cc-space-13: calc(var(--cc-space-unit) * 14); /* 112px */ --cc-space-14: calc(var(--cc-space-unit) * 16); /* 128px */ --cc-space-15: calc(var(--cc-space-unit) * 20); /* 160px */ --cc-space-16: calc(var(--cc-space-unit) * 24); /* 192px */ /* Extraidos: 80px de aire en escritorio, 52px en movil. */ --cc-section-y: clamp(3.25rem, 6vw, 5rem); --cc-container: 1360px; /* max-width real de las secciones */ --cc-gutter: clamp(1rem, 3.5vw, 2.5rem); /* 16px movil → 40px escritorio */ /* Mosaico apretado: las rejillas del sitio van a 4px, no al canalon. Es una decision de marca, no de seccion: por eso vive aqui. */ --cc-grid-gap: var(--cc-space-1); /* ---------- MOVIMIENTO ---------- Extraido: reveal de .65s con 22px de recorrido y escalonado de 80ms. Hover a .22s. La curva es la que ya usaban las fotos al ampliarse. */ --cc-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --cc-ease-out: cubic-bezier(0.45, 0.05, 0.2, 1); --cc-dur-fast: 220ms; --cc-dur: 650ms; --cc-dur-slow: 900ms; --cc-reveal-y: 22px; --cc-reveal-stagger: 80ms; /* ---------- EXTENSIONES DE PROYECTO ---------- Documentadas en docs/TOKENS.md antes de existir aqui. */ /* Filete sobre fondo crema. El chasis calcula uno por color-mix en las secciones invertidas; este es el valor exacto del diseno. */ --cc-line-inverse: var(--cc-c-cream-line); /* Halo naranja: la unica "sombra" real del sitio, en hover de botones. */ --cc-glow-fire: 0 8px 24px color-mix(in srgb, var(--cc-c-fire) 40%, transparent); --cc-glow-fire-lg: 0 10px 28px color-mix(in srgb, var(--cc-c-fire) 45%, transparent); /* Velo de foto: el degradado que llevan todas las tarjetas con imagen. */ --cc-veil-card: linear-gradient( to top, color-mix(in srgb, var(--cc-c-soot) 95%, transparent) 0%, color-mix(in srgb, var(--cc-c-soot) 35%, transparent) 52%, transparent 100% ); /* Estado de error. El sitio no tenia ninguno: aparece con el formulario de contacto, que necesita marcar campos invalidos. Rojo apagado, no bermellon: sobre carbon un rojo saturado vibra. Medidos sobre --cc-bg: --cc-error-ink sobre --cc-bg → 7.45:1 (texto del mensaje) --cc-error sobre --cc-bg → 4.50:1 (borde del campo invalido) El borde no lleva texto encima, asi que le basta con los 3:1 de elemento. */ --cc-error: #d6453d; --cc-error-ink: #e8827c; /* Versalitas: el sitio repite tres rastreos. Tokenizados para que un rotulo nuevo no invente un cuarto. */ --cc-tracking-label: 0.32em; /* rotulos de seccion */ --cc-tracking-tag: 0.26em; /* etiquetas de tarjeta */ --cc-tracking-btn: 0.18em; /* botones y flechas */ /* ---------- BREAKPOINTS ---------- Si cambia uno aqui, cambiarlo tambien en chassis.css. */ --cc-bp-sm: 480px; --cc-bp-md: 768px; --cc-bp-lg: 1024px; --cc-bp-xl: 1440px; } /* ============================================================================= ESCALA TIPOGRAFICA BASE Lo minimo para que el documento herede la marca. Nada decorativo. ============================================================================= */ body { background-color: var(--cc-bg); color: var(--cc-ink); font-family: var(--cc-font-body); font-weight: var(--cc-weight-body); font-size: var(--cc-text-base); line-height: var(--cc-leading-body); } h1, h2, h3, h4 { font-family: var(--cc-font-display); font-weight: var(--cc-weight-display); letter-spacing: var(--cc-tracking-display); line-height: var(--cc-leading-display); color: var(--cc-ink); } /* De H3 hacia abajo el titular sigue siendo Playfair, pero en 700: es el peso que usan los nombres de las tarjetas en todo el sitio. */ h3, h4 { font-weight: 700; letter-spacing: 0; line-height: 1.1; } /* ============================================================================= ALTURA DE CABECERA Ajustar al valor real cuando el patron "CC Header" este construido, o los anclajes de seccion quedaran desplazados. ============================================================================= */ :root { --cc-header-h: 4.75rem; --cc-anchor-offset: calc(var(--cc-header-h) + var(--cc-space-5)); }