/* * variables.css * ───────────────────────────────────────────────────────────────────────────── * SISTEMA DE TOKENS DE DISEÑO * * ¿Qué es esto? * Un "token" es una variable con nombre que guarda un valor de diseño. * En lugar de escribir "#3b82f6" en 50 sitios distintos, escribimos * "var(--color-primary)" y solo tenemos que cambiar el valor aquí. * * ¿Por qué en :root? * :root es el elemento raíz del documento (equivale a ). * Las variables declaradas aquí son accesibles desde cualquier selector * de toda la aplicación — son globales. * * Convención de nombres: --categoria-variante * Ejemplos: --color-primary, --space-4, --shadow-md * ───────────────────────────────────────────────────────────────────────────── */ :root { /* ── COLORES BASE ────────────────────────────────────────────────────────── * * Paleta principal de la aplicación CJFitness. * Se organiza en capas: fondos → superficies → texto → acción → estado. * * Filosofía: EMERALD WELLNESS — verde esmeralda profundo para estructura * (salud, recuperación, fisio), bronce cálido como acento, crema cálida de * base. Regla WCAG (research): el bronce lleva texto OSCURO encima (nunca * blanco); el emerald domina (60-70%), el bronce es acento (10-15%). * ─────────────────────────────────────────────────────────────────────────*/ /* ── ESCALA DE MARCA: CANARY BLUE (estructura/primary) + CANARY YELLOW (acento) ── * Paleta "Islas Canarias" (prueba local, cliente). NOTA: se mantienen los * NOMBRES --emerald-*/--bronze-* (usados por hero, login, etc.); sus * VALORES son ahora azul/amarillo de la bandera canaria. El blanco ya * domina fondos/superficies (--color-bg, --color-surface), así que la * tercera franja de la bandera sale gratis del sistema existente. * Cambiar solo aquí re-tinta toda la app. */ --emerald-950: #0a1c33; /* azul casi negro — secciones dark */ --emerald-900: #0d2c52; /* AZUL CANARIO de marca — sidebar, hero, base */ --emerald-800: #12395f; /* azul estructura */ --emerald-700: #15487a; /* azul hover/primary-dark */ --emerald-600: #1c56a0; /* AZUL primary (botones, links) */ --emerald-500: #2f6bc4; /* azul interactivo más claro */ --bronze-700: #8a6800; /* dorado profundo — texto sobre claro */ --bronze-600: #b98e00; /* dorado profundo (hover de fills) */ --bronze-500: #ffc72c; /* AMARILLO CANARIO de marca — fills de CTA, acentos, iconos */ --bronze-400: #ffd35c; --bronze-300: #ffe28c; /* amarillo suave — texto/icono sobre azul */ --bronze-100: #fff6db; /* tinte de fondo */ /* Fondos — gris azulado claro (limpio, frío) */ --color-bg: #f4f6f8; /* fondo general de página */ --color-bg-alt: #e9edf2; /* fondo alternativo para secciones */ --color-surface: #ffffff; /* fondo de cards, modales, formularios */ --color-surface-alt: #f4f6f8; /* fondo de filas alternas en tablas */ /* Estructura — sidebar, topbar, navegación (navy noche) */ --color-sidebar: var(--emerald-900); /* navy profundo */ --color-sidebar-alt: var(--emerald-800); /* versión ligeramente más clara */ --color-sidebar-text: #a9b8cc; /* texto en el sidebar (azul-gris claro) */ --color-sidebar-hover: var(--emerald-800); /* fondo del item de nav al hover */ --color-sidebar-active: var(--bronze-500); /* item de nav activo — AMARILLO sobre azul */ /* Acento principal — acciones/estructura (AZUL CANARIO) */ --color-primary: var(--emerald-600); /* azul de marca #1c56a0 */ --color-primary-dark: var(--emerald-700); /* azul más profundo (hover) #15487a */ --color-primary-light:#e5eefc; /* azul muy claro (fondos de badges) */ /* Acento secundario — energía, destacados (AMARILLO CANARIO) */ --color-accent: var(--bronze-500); /* amarillo de marca */ --color-accent-dark: var(--bronze-600); /* amarillo profundo (hover) */ --color-accent-light: var(--bronze-100); /* coral muy claro (fondos) */ --color-on-accent: #21140e; /* texto SOBRE coral (oscuro — pasa AA) */ --color-gold-on-dark: var(--bronze-300); /* coral suave como texto/icono sobre navy */ /* Estados — feedback visual (success/danger/info ≠ marca) */ --color-success: #3d9a63; /* verde success */ --color-success-light:#dcefe3; /* verde claro (fondos) */ --color-success-dark: #2c7249; /* verde oscuro (texto sobre fondo claro) */ --color-danger: #d23b3b; /* rojo (distinto del coral) */ --color-danger-light: #f7dcdc; /* rojo claro (fondos) */ --color-danger-dark: #a02a2a; /* rojo oscuro (texto sobre fondo claro) */ --color-warning: #d98a2b; /* ámbar (distinto del coral acento) */ --color-warning-light: #fbedd6; --color-warning-dark: #8a5310; /* ámbar oscuro (texto sobre fondo claro) */ --color-warning-border: #f0c98a; --color-warning-icon: #cf7d1e; --color-info: #3a72a8; /* azul info (más claro que el navy marca) */ --color-info-light: #e5eef6; --color-info-border: #b9d2e8; --color-info-icon: #3a72a8; /* Texto — jerarquía tipográfica (navy-ink) */ --color-text: #172033; /* texto principal (navy casi negro) */ --color-text-secondary: #5a6b80; /* texto secundario (azul-gris) */ --color-text-muted: #9aa8ba; /* texto desactivado, placeholders */ --color-text-inverse: #ffffff; /* texto sobre fondos oscuros */ /* Bordes — azul-gris frío */ --color-border: #dde3ea; /* borde estándar */ --color-border-dark: #c6d0dc; /* borde más visible */ /* ── TIPOGRAFÍA ─────────────────────────────────────────────────────────── * * Usamos una font-stack sin serifa moderna. * "Inter" es la tipografía estándar en apps SaaS modernas (Vercel, Linear, * Notion). Si no está instalada en el sistema, el navegador cae a Segoe UI * (Windows) o San Francisco (Mac), que son igualmente buenas. * * Escala de tamaños: basada en una progresión de 1.25 (Major Third). * Esto significa que cada nivel es 1.25x el anterior, lo que da una * jerarquía visual clara y armoniosa. * ─────────────────────────────────────────────────────────────────────────*/ --font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Serif display para titulares hero/marketing (peso editorial premium) */ --font-display: 'Playfair Display', 'Georgia', serif; /* Tamaños */ --text-xs: 0.75rem; /* 12px — etiquetas, badges pequeños */ --text-sm: 0.875rem; /* 14px — texto secundario, tabla */ --text-base: 1rem; /* 16px — texto normal */ --text-lg: 1.125rem; /* 18px — texto importante */ --text-xl: 1.25rem; /* 20px — subtítulos pequeños */ --text-2xl: 1.5rem; /* 24px — títulos de sección */ --text-3xl: 1.875rem; /* 30px — títulos de página */ --text-4xl: 2.25rem; /* 36px — hero/landing */ /* Pesos */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Altura de línea */ --leading-tight: 1.25; /* títulos */ --leading-normal: 1.5; /* texto normal */ --leading-relaxed:1.75; /* texto largo, párrafos */ /* ── ESPACIADOS ─────────────────────────────────────────────────────────── * * Sistema basado en múltiplos de 4px (0.25rem). * Usar siempre estos valores y no valores arbitrarios como "13px" o "22px". * Esto da consistencia visual y hace que los layouts se vean ordenados. * * --space-1 = 4px (separación mínima, iconos) * --space-2 = 8px (padding interno pequeño) * --space-3 = 12px (gap entre elementos relacionados) * --space-4 = 16px (padding estándar) * --space-6 = 24px (separación entre secciones pequeñas) * --space-8 = 32px (separación entre secciones) * --space-12 = 48px (separación grande) * --space-16 = 64px (secciones de página) * ─────────────────────────────────────────────────────────────────────────*/ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ── BORDES Y RADIO ─────────────────────────────────────────────────────── * * Los bordes redondeados dan modernidad y suavidad. * Usamos un sistema progresivo: * - sm para elementos pequeños (badges, inputs) * - md para cards y botones estándar * - lg para cards grandes o paneles * - xl para modales o elementos prominentes * - full para círculos (avatares, botones circulares) * ─────────────────────────────────────────────────────────────────────────*/ --radius-sm: 0.375rem; /* 6px */ --radius-md: 0.5rem; /* 8px */ --radius-lg: 0.75rem; /* 12px */ --radius-xl: 1rem; /* 16px */ --radius-2xl: 1.5rem; /* 24px */ --radius-full: 9999px; /* círculo completo */ /* ── SOMBRAS ────────────────────────────────────────────────────────────── * * Las sombras crean profundidad y jerarquía visual. * Una sombra más grande/difusa = elemento más "elevado" visualmente. * * Usamos sombras de color azul-gris (no negro puro) porque quedan * más naturales y modernas sobre fondos claros. * ─────────────────────────────────────────────────────────────────────────*/ --shadow-sm: 0 1px 2px rgba(23, 32, 51, 0.06); --shadow-md: 0 4px 6px -1px rgba(23, 32, 51, 0.08), 0 2px 4px -1px rgba(23, 32, 51, 0.04); --shadow-lg: 0 10px 15px -3px rgba(23, 32, 51, 0.09), 0 4px 6px -2px rgba(23, 32, 51, 0.04); --shadow-xl: 0 20px 25px -5px rgba(23, 32, 51, 0.12), 0 10px 10px -5px rgba(23, 32, 51, 0.05); /* Sombra de card al hacer hover (navy sutil) */ --shadow-hover: 0 8px 25px -5px rgba(36, 71, 107, 0.20), 0 4px 10px -5px rgba(36, 71, 107, 0.12); /* ── TRANSICIONES ───────────────────────────────────────────────────────── * * Valores estándar para animaciones CSS. * "fast" para feedback inmediato (hover de botones). * "normal" para transiciones de elementos (cards, modales). * "slow" para animaciones de entrada de página. * ─────────────────────────────────────────────────────────────────────────*/ --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; /* ── LAYOUT ─────────────────────────────────────────────────────────────── * Dimensiones fijas del layout principal. * Cambiar aquí afecta toda la estructura de la app. * ─────────────────────────────────────────────────────────────────────────*/ --sidebar-width: 240px; /* ancho del sidebar en escritorio */ --sidebar-width-collapsed: 64px; /* ancho del sidebar colapsado */ --topbar-height: 64px; /* altura de la barra superior */ --content-max-width: 1200px; /* ancho máximo del contenido */ /* ── BREAKPOINTS (referencia canónica — Sprint 3.12) ────────────────────── * CSS vanilla NO permite var() dentro de @media, así que estos tokens son * la REFERENCIA a usar en las media queries nuevas (escribir el valor px). * Estándar 4 niveles — usar SIEMPRE uno de estos, no valores arbitrarios: * --bp-sm: 640px móvil grande / phablet * --bp-md: 768px tablet * --bp-lg: 1024px laptop * --bp-xl: 1280px escritorio ancho * ─────────────────────────────────────────────────────────────────────────*/ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; }