/* ===================================================================== FLOCK · TOKENS Única fuente de verdad. La cargan la web pública y el panel. Dirección: el ultramar es el SUELO, no un adorno. Secciones enteras van en azul con el texto en blanco, y el negro es tinta sobre papel. El blanco se reserva para la ropa fotografiada, que así se ve por lo que es. Un solo color de aviso, la brasa, para lo que de verdad es nuevo. El nombre: una bandada son muchos independientes moviéndose juntos, y el «flocking» es la técnica textil del acabado aterciopelado. Las dos cosas describen lo que hay aquí. Los nombres son de ROL, no de color. El tema claro es el de la web; el panel activa el oscuro con data-theme="dark". ===================================================================== */ :root { /* --------------------------------------------------------------- Tipografía Anybody para titulares: tiene eje de ancho variable, así que el mismo titular puede ir estrecho o ensanchado según el hueco, y está pensada para cartel. Hanken Grotesk para el resto: humanista, cálida y muy legible a cuerpo pequeño. La monoespaciada se conserva sólo porque el panel la usa en tablas de datos; en la web pública no aparece. --------------------------------------------------------------- */ --fk-display: 'Anybody', 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --fk-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fk-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fk-t-2xs: 0.6875rem; /* 11 */ --fk-t-xs: 0.75rem; /* 12 */ --fk-t-sm: 0.8125rem; /* 13 */ --fk-t-md: 0.9375rem; /* 15 */ --fk-t-lg: 1.0625rem; /* 17 */ --fk-t-xl: 1.375rem; /* 22 */ --fk-t-2xl: 1.75rem; /* 28 */ --fk-t-3xl: 2.25rem; /* 36 */ --fk-t-4xl: 3rem; /* 48 */ --fk-t-5xl: 4.25rem; /* 68 */ --fk-leading-tight: 1.02; --fk-leading-snug: 1.35; --fk-leading: 1.6; --fk-track-caps: .1em; --fk-track-tight: -.03em; /* --------------------------------------------------------------- Espaciado · base 4 --------------------------------------------------------------- */ --fk-1: 4px; --fk-2: 8px; --fk-3: 12px; --fk-4: 16px; --fk-5: 20px; --fk-6: 24px; --fk-8: 32px; --fk-10: 40px; --fk-12: 48px; --fk-14: 56px; --fk-18: 72px; --fk-24: 96px; --fk-section: clamp(48px, 7vw, 96px); --fk-gap: 8px; /* hueco entre fotos: fino, como en las tiendas */ /* --------------------------------------------------------------- Geometría · recta, sin esquinas blandas --------------------------------------------------------------- */ --fk-r-xs: 0; --fk-r-sm: 2px; --fk-r-md: 4px; --fk-r-lg: 6px; --fk-r-xl: 8px; --fk-r-full: 999px; --fk-border: 1px; /* --------------------------------------------------------------- Movimiento --------------------------------------------------------------- */ --fk-ease: cubic-bezier(.22, 1, .36, 1); --fk-ease-spring: cubic-bezier(.34, 1.3, .52, 1); --fk-fast: 160ms; --fk-base: 320ms; --fk-slow: 640ms; /* --------------------------------------------------------------- Color · tema claro (la web) --------------------------------------------------------------- */ --fk-canvas: #FFFFFF; --fk-canvas-deep: #EFEFF8; /* bruma: el neutro tira al azul de la marca */ --fk-surface: #FFFFFF; --fk-surface-hi: #F5F5FB; /* hover / superficie secundaria */ --fk-field: #FFFFFF; --fk-text: #000000; --fk-text-soft: #3A3A46; --fk-text-muted: #6F6F80; --fk-on-ink: #FFFFFF; /* texto sobre fondo negro */ /* El ultramar de Flock. Siempre con texto BLANCO encima: es un azul oscuro, no un amarillo. Quien lo use tiene que usar --fk-on-accent. */ --fk-accent: #2B32E8; --fk-accent-hover: #3F45F2; --fk-accent-deep: #1A1FA8; /* pulsado, bordes sobre azul */ --fk-accent-soft: rgba(43, 50, 232, .12); --fk-on-accent: #FFFFFF; --fk-accent-grad: #2B32E8; /* alias: no hay degradado */ --fk-accent-glow: none; /* Brasa: el único color de aviso. El azul no puede decir «nuevo» si ya lo dice todo el fondo. */ --fk-brasa: #FF5A36; --fk-brasa-soft: rgba(255, 90, 54, .14); --fk-line: rgba(0, 0, 0, .12); --fk-line-strong: rgba(0, 0, 0, .26); --fk-positive: #1E8F5E; --fk-positive-soft: rgba(30, 143, 94, .12); --fk-caution: #B07A0A; --fk-caution-soft: rgba(176, 122, 10, .13); --fk-critical: #C8323F; --fk-critical-soft: rgba(200, 50, 63, .11); --fk-neutral: #2F5FCB; --fk-neutral-soft: rgba(47, 95, 203, .12); --fk-shadow-sm: 0 1px 2px rgba(12, 12, 14, .06); --fk-shadow: 0 10px 30px rgba(12, 12, 14, .1); --fk-shadow-lg: 0 24px 60px rgba(12, 12, 14, .14); --fk-grid-line: rgba(0, 0, 0, .08); color-scheme: light; } /* --------------------------------------------------------------- Tema oscuro · el panel de administración Cambian los VALORES, no los nombres. --------------------------------------------------------------- */ [data-theme='dark'] { --fk-canvas: #0C0C0E; --fk-canvas-deep: #000000; --fk-surface: #141416; --fk-surface-hi: #1C1C1F; --fk-field: #101012; --fk-text: #FFFFFF; --fk-text-soft: #A6A6A2; --fk-text-muted: #6E6E6A; --fk-on-ink: #0C0C0E; --fk-accent: #2B32E8; --fk-accent-hover: #4A50F5; --fk-accent-soft: rgba(43, 50, 232, .18); --fk-on-accent: #FFFFFF; --fk-accent-grad: #2B32E8; --fk-accent-glow: none; --fk-line: rgba(255, 255, 255, .1); --fk-line-strong: rgba(255, 255, 255, .2); --fk-positive: #45D9A0; --fk-positive-soft: rgba(69, 217, 160, .14); --fk-caution: #FFC24D; --fk-caution-soft: rgba(255, 194, 77, .14); --fk-critical: #FF5F6D; --fk-critical-soft: rgba(255, 95, 109, .14); --fk-neutral: #6E9BFF; --fk-neutral-soft: rgba(110, 155, 255, .14); --fk-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --fk-shadow: 0 12px 40px rgba(0, 0, 0, .45); --fk-shadow-lg: 0 28px 72px rgba(0, 0, 0, .55); --fk-grid-line: rgba(255, 255, 255, .06); color-scheme: dark; } @media (prefers-reduced-motion: reduce) { :root { --fk-fast: 1ms; --fk-base: 1ms; --fk-slow: 1ms; } }