/* ================================================ DESIGN TOKENS — Fondos Foto Pro Versión: 2.0 Referencia visual: propco.com.ar (CSS verificado) ================================================ ESTRUCTURA (tres secciones, siempre en este orden): 1. Primitivos — valores crudos, nunca usar en componentes 2. Semánticos — propósito en la UI, únicos que van en componentes 3. Breakpoints — referencia canónica, no son custom properties CÓMO PORTAR A OTRO PROYECTO: 1. Actualizar Sección 1 con la nueva paleta y tipografía 2. Revisar Sección 2 — en general no se modifica 3. Sección 3 — mantener salvo decisión explícita de diseño CONVENCIÓN: --_nombre → primitivo (prefijo _ = uso interno, no usar en componentes) --nombre → semántico (uso libre en cualquier archivo CSS) ================================================ */ /* ------------------------------------------------ SECCIÓN 1 — PRIMITIVOS ------------------------------------------------ */ :root { /* Escala de color — neutrales Fuente: CSS real de propco.com.ar */ --_color-100: #ffffff; --_color-200: #f5f5f5; /* footer, superficies alternativas */ --_color-300: #e0e0e0; --_color-400: #bdbdbd; --_color-500: #8a8a8a; /* accent, labels, texto secundario */ --_color-600: #616161; --_color-700: #333333; /* newsletter, secciones oscuras */ --_color-800: #1a1a1a; --_color-900: #000000; /* Marca — navy/indigo NOTA: #3e417b es el color de PROPco (referencia). Pendiente confirmar con Gabriela si es el final. */ --_color-brand: #3e417b; /* Acento — lima/amarillo Usado en énfasis (ya no en topbar — ver --_color-topbar). Requiere texto oscuro encima (#000). */ --_color-accent: #D9FE01; /* Topbar — gris verdoso claro (pedido de Gabriela, revisión 01) */ --_color-topbar: #d0d1c5; /* WhatsApp — brand colors (FAB flotante) */ --_color-whatsapp: #25D366; --_color-whatsapp-hover: #1ebe57; /* Status */ --_color-success: #1d8348; /* era #4bb98c — ratio 4.37:1 sobre blanco ✅ AA */ --_color-danger: #c0392b; /* era #dd7774 — ratio 5.13:1 sobre blanco ✅ AA */ --_color-warning: #b45309; /* era #dc8f38 — ratio 4.78:1 sobre blanco ✅ AA */ /* Tipografía — familia Fuente: Google Fonts Cargar en enqueue.php: Outfit 400,600 */ --_font-sans: 'Outfit', system-ui, sans-serif; --_font-serif: Georgia, 'Times New Roman', serif; --_font-mono: ui-monospace, 'Cascadia Code', monospace; /* Escala tipográfica — fuente: propco.com.ar Valores en rem (base de navegador: 16px) */ --_size-xs: 0.625rem; /* 10px — labels tiny */ --_size-sm: 0.75rem; /* 12px — metadata */ --_size-base: 0.875rem; /* 14px — body base */ --_size-big: 1rem; /* 16px — texto grande */ --_size-large: 1.125rem; /* 18px — precio */ --_size-huge: 1.25rem; /* 20px — subtítulos */ --_size-h6: 0.875rem; /* 14px */ --_size-h5: 1rem; /* 16px */ --_size-h4: 1.125rem; /* 18px */ --_size-h3: 1.25rem; /* 20px */ --_size-h2: 1.5rem; /* 24px */ --_size-h1: 1.75rem; /* 28px */ --_size-display: 2.5rem; /* 40px — solo hero */ /* Escala de espaciado — grid base 4px */ --_space-1: 0.25rem; /* 4px */ --_space-2: 0.5rem; /* 8px */ --_space-3: 0.75rem; /* 12px */ --_space-4: 1rem; /* 16px */ --_space-6: 1.5rem; /* 24px */ --_space-8: 2rem; /* 32px */ --_space-12: 3rem; /* 48px */ --_space-16: 4rem; /* 64px */ --_space-24: 6rem; /* 96px */ /* Sección — espaciado entre bloques Fuente: propco.com.ar (--section-distance-*) */ --_section-sm: 1.875rem; /* 30px */ --_section-md: 2.5rem; /* 40px */ --_section-lg: 3.75rem; /* 60px */ } /* ------------------------------------------------ SECCIÓN 2 — SEMÁNTICOS Única fuente de verdad para componentes y layouts. Si necesitás un valor nuevo, agregalo acá — nunca hardcodear valores en otros archivos CSS. ------------------------------------------------ */ :root { /* --- Superficie --- */ --color-bg: var(--_color-100); --color-bg-subtle: var(--_color-200); --color-bg-raised: var(--_color-100); --color-bg-dark: var(--_color-700); --color-bg-darkest: var(--_color-800); /* #1a1a1a — admin sidebar */ --color-bg-void: var(--_color-900); /* #000000 — admin submenu */ /* --- Texto --- */ --color-text: var(--_color-900); --color-text-muted: var(--_color-500); --color-text-invert: var(--_color-100); /* --- Borde --- */ --color-border: var(--_color-300); /* divisores decorativos — no usar en campos interactivos */ --color-border-field: var(--_color-600); /* campos interactivos — 5.74:1 sobre blanco ✅ AA */ --color-border-strong: var(--_color-700); /* --- CTA / Botón primario --- */ --color-cta-bg: var(--_color-brand); --color-cta-text: var(--_color-100); --color-cta-hover: var(--_color-800); /* --- Acento --- */ --color-accent: var(--_color-accent); --color-accent-text: var(--_color-900); /* negro sobre lima */ /* --- Topbar (barra de anuncios) --- */ --color-topbar-bg: var(--_color-topbar); --color-topbar-text: var(--_color-900); /* --- WhatsApp FAB --- */ --color-whatsapp: var(--_color-whatsapp); --color-whatsapp-hover: var(--_color-whatsapp-hover); /* --- Adbar (announcement bar) --- */ --color-adbar-bg: var(--_color-100); --color-adbar-text: var(--_color-500); /* --- Footer --- */ --color-footer-bg: var(--_color-200); --color-footer-text: var(--_color-900); /* --- Status --- */ --color-success: var(--_color-success); --color-danger: var(--_color-danger); --color-warning: var(--_color-warning); /* --- Tipografía — familia --- */ --font-body: var(--_font-sans); --font-display: var(--_font-sans); --font-mono: var(--_font-mono); /* --- Tipografía — tamaño --- */ --size-smallest: var(--_size-xs); --size-small: var(--_size-sm); --size-body: var(--_size-base); --size-big: var(--_size-big); --size-large: var(--_size-large); --size-huge: var(--_size-huge); --size-h6: var(--_size-h6); --size-h5: var(--_size-h5); --size-h4: var(--_size-h4); --size-h3: var(--_size-h3); --size-h2: var(--_size-h2); --size-h1: var(--_size-h1); --size-display: var(--_size-display); /* --- Tipografía — peso --- */ --weight-regular: 400; --weight-medium: 500; /* mantener: en uso en otros archivos */ --weight-semibold: 600; /* peso principal de headings (PROPco) */ --weight-bold: 700; /* mantener: en uso en otros archivos */ /* --- Tipografía — interlineado --- */ --leading-tight: 1.2; --leading-normal: 1.333; --leading-loose: 1.5; /* --- Espaciado semántico --- */ --space-xs: var(--_space-2); /* 8px */ --space-sm: var(--_space-4); /* 16px */ --space-md: var(--_space-6); /* 24px */ --space-lg: var(--_space-8); /* 32px */ --space-xl: var(--_space-12); /* 48px */ --space-section-sm: var(--_section-sm); /* 30px */ --space-section: var(--_section-md); /* 40px */ --space-section-lg: var(--_section-lg); /* 60px */ /* --- Forma --- */ --radius-none: 0; /* botones y cards (estilo PROPco) */ --radius-sm: 4px; /* base del sistema */ --radius-md: 8px; /* mantener: en uso en otros archivos */ --radius-lg: 16px; /* mantener: en uso en otros archivos */ --radius-pill: 15px; /* badges sobre imagen de producto */ --radius-full: 100%; /* círculos, íconos */ /* --- Sombra --- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10); --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12); /* --- Movimiento --- */ --transition-fast: 150ms ease; --transition-normal: 400ms ease; /* --- Grid --- */ --grid-gutter: 15px; --grid-cols-mobile: 2; --grid-cols-desktop: 4; --container-max: 1140px; /* --- Card de producto --- */ --card-image-ratio: 2 / 3; /* portrait rectangular — 60×90 / 90×120 */ } /* ================================================ SECCIÓN 3 — BREAKPOINTS ================================================ Los CSS custom properties no funcionan dentro de @media queries. Estos valores son la referencia canónica del proyecto — nunca hardcodear otros. Uso: @media (min-width: 640px) { } → sm @media (min-width: 768px) { } → md ← grilla 2→4 cols @media (min-width: 1200px) { } → lg sm: 640px — mobile landscape md: 768px — tablet / cambio de grilla (col-md-3) lg: 1200px — desktop wide ================================================ */