/* Clash Grotesk -- tipografia real de croydon.com.co, auto-alojada (no depende de internet el dia de la demo). Solo los pesos que usamos para momentos de marca (login, header, nombre de producto en Display). */ @font-face { font-family: "Clash Grotesk"; src: url("/static/fonts/ClashGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Clash Grotesk"; src: url("/static/fonts/ClashGrotesk-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Clash Grotesk"; src: url("/static/fonts/ClashGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --bg: #0b0f14; --panel: #131a23; --panel-2: #1a2330; --border: #253044; --text: #e8edf4; --text-dim: #8b98ac; /* Azul institucional de Croydon (muestreado del logo real, #004e9e) -- aclarado para --accent porque el tono original es demasiado oscuro para usarse como texto sobre un fondo casi negro (ver docs/03 y el calculo de contraste WCAG hecho antes de fijar estos valores). */ --accent: #56a0f2; --accent-dark: #1d6fd1; --brand-blue-deep: #004e9e; --gold: #e8a33d; --danger: #f0546a; --accent-glow: rgba(86, 160, 242, 0.55); --radius: 14px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: "Clash Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ---------- TEMAS ---------- */ /* Paletas alternativas (ver agents.py _ejecutar_cambiar_tema / app.js aplicarTema) -- mismo set de variables que :root, cambiando solo color. Se activan con [data-theme] en , asi que TODO lo que ya usa var(...) cambia automaticamente, sin tocar el resto del CSS. */ /* Los 3 temas oscuros de abajo se suavizaron a pedido del usuario ("suaviza tambien los otros 3 temas") tras agregar Mac Claro -- fondos/bordes menos saturados (gris neutro con apenas un tinte, en vez de negro-morado/negro- cian puro), acentos menos "neon puro" (bajados de luminosidad/saturacion), glow mucho mas bajo (0.22-0.25 vs 0.55 original, en linea con el 0.18 de Mac Claro) y "--gold" (precio) unificado en una familia dorada/ambar en \ vez de colores neon que competian visualmente con el acento. Mantienen su \ identidad de color (cian/rosa/verde-azulado) pero mas serios, menos \ "gritones". */ html[data-theme="neon"] { --bg: #0a0c12; --panel: #10131c; --panel-2: #171b28; --border: #262c3d; --text: #e8edf3; --text-dim: #838fa8; --accent: #2bc4d6; --accent-dark: #1a93a3; --gold: #d9a24d; --danger: #e2536b; --accent-glow: rgba(43, 196, 214, 0.25); } html[data-theme="synthwave"] { --bg: #120c16; --panel: #1c1620; --panel-2: #251e2c; --border: #3a3040; --text: #f3ecf5; --text-dim: #a290ac; --accent: #cf6f96; --accent-dark: #a84f74; --gold: #e3ab5c; --danger: #e2536b; --accent-glow: rgba(207, 111, 150, 0.25); } html[data-theme="aurora"] { --bg: #0a1114; --panel: #101a1e; --panel-2: #17242a; --border: #24393e; --text: #e6f3f1; --text-dim: #7c9c97; --accent: #29b3a3; --accent-dark: #1c8577; --gold: #c7b06a; --danger: #e2607a; --accent-glow: rgba(41, 179, 163, 0.22); } /* Unico tema claro -- deliberadamente mas sobrio que los otros 3 (pedido del usuario: "uno que sea claro... mas elegante o serio estilo mac"). Paleta tomada del sistema de macOS/Apple (fondo #f5f5f7, texto #1d1d1f, azul de sistema #0071e3) y un --accent-glow bajito (0.18 vs 0.55 de los demas) para que el mismo glow del boton primario se vea como una sombra discreta en vez de un neon, en vez de bajarlo a 0 y perder la coherencia entre temas. */ html[data-theme="claro"] { --bg: #f5f5f7; --panel: #ffffff; --panel-2: #f2f2f4; --border: #d9d9de; --text: #1d1d1f; --text-dim: #6e6e73; --accent: #0071e3; --accent-dark: #005bb8; --gold: #b9770e; --danger: #d70015; --accent-glow: rgba(0, 113, 227, 0.18); } * { box-sizing: border-box; } /* Reset nativo de