/* ========================================================================== tokens.css — SOLO custom properties. Ningún selector con estilos. Estudio Ravalli · Mar del Plata ========================================================================== */ :root { /* --- Color ------------------------------------------------------------- Ratios medidos, no estimados. Tabla completa al final de este archivo. Tres reglas que salen de esa tabla y no son opinables: 1. --brand-500 NO es color de texto. Ni en claro (4.47) ni en oscuro (3.86). Tampoco es fondo de botón con texto paper (4.47). En claro, el botón primario usa --brand-700 (8.35 con paper). En oscuro usa paper, con texto ink-900 (17.25). 2. --accent está PROHIBIDO sobre fondos claros: 2.88 sobre paper, 2.60 sobre sand-100. Solo vive sobre ink-900 / ink-800. 3. El anillo de foco no puede ser --accent fijo: sobre paper da 2.88 y no llega al 3:1 que pide WCAG 1.4.11. El outline usa --fg-accent directamente: brand-700 en claro y brand-300 en oscuro. */ --ink-900: #07181E; --ink-800: #0E2A33; --ink-600: #45606A; /* texto secundario en claro — 6.37 sobre paper */ --brand-700: #12525E; /* texto y fondo de botón en claro — 8.35 */ --brand-500: #1A7F8E; /* SOLO bordes y fondos sin texto. Nunca texto. */ --brand-300: #6FB3BC; /* texto secundario en oscuro — 7.64 / 6.34 */ --paper: #FBF9F6; --sand-100: #F2EDE6; --accent: #C08A3E; /* SOLO sobre oscuro — 6.00 / 4.97. Ver regla 2 */ /* Roles semánticos: se reasignan por banda en layout.css */ --bg: var(--paper); --fg: var(--ink-900); --fg-muted: var(--ink-600); --fg-accent: var(--brand-700); --rule: rgba(7, 24, 30, .14); /* --- Tipografía -------------------------------------------------------- */ --font-display: ui-serif, "Iowan Old Style", "Palatino Linotype", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Escala fluida. Ratio 1.25 en mobile → 1.333 en desktop. */ --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --fs-md: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); --fs-lg: clamp(1.5rem, 1.3rem + 1vw, 2rem); --fs-xl: clamp(1.875rem, 1.5rem + 1.9vw, 2.6875rem); --fs-2xl: clamp(2.25rem, 1.7rem + 2.75vw, 3.5rem); --fs-display: clamp(2.125rem, 1.1rem + 3.25vw, 3.875rem); --lh-tight: 1.12; --lh-heading: 1.15; --lh-body: 1.6; --ls-tight: -0.02em; --ls-normal: 0; --ls-wide: 0.08em; --ls-eyebrow: 0.14em; --measure: 68ch; /* medida de lectura máxima */ --measure-narrow: 54ch; /* --- Espaciado (escala de 4px) ----------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px; --s-32: 128px; --section-pad: clamp(64px, 8vw, 104px); /* --- Layout ------------------------------------------------------------ */ --container-max: 1120px; --gutter: 24px; --grid-gap: 24px; /* Corte de banda: un solo ángulo, -4deg. tan(4°) = 0.0699 */ --cut: min(calc(100vw * 0.0699), 120px); /* --- Formas ------------------------------------------------------------ */ --radius: 4px; --radius-lg: 8px; /* techo, salvo pills */ --radius-pill: 999px; --border-w: 1px; --stroke-w: 2px; /* -webkit-text-stroke del gesto de marca */ /* --- Foco -------------------------------------------------------------- */ /* base.css usa --fg-accent directamente en cada elemento para que el anillo siga el color de su banda sin resolverlo prematuramente en :root. */ --focus-w: 3px; --focus-offset: 3px; --focus-color: var(--fg-accent); /* --- Área táctil -------------------------------------------------------- */ --tap: 44px; /* --- Movimiento --------------------------------------------------------- */ --dur: 200ms; --ease: ease-out; --reveal-y: 8px; --stagger: 60ms; /* --- Cromo -------------------------------------------------------------- */ --mobilebar-h: 56px; --z-skip: 100; --z-mobilebar: 90; } @media (min-width: 768px) { :root { --gutter: 32px; --grid-gap: 32px; } } /* ========================================================================== TABLA DE CONTRASTE — todos los pares en uso, medidos. No recalcular: si agregás un par nuevo, medilo y sumalo acá. Umbrales WCAG 2.2 AA: 4.5:1 texto normal (< 24px, o < 18.66px si es bold) 3.0:1 texto grande (>= 24px, o >= 18.66px bold) 3.0:1 componentes de interfaz y estados de foco (1.4.11, 2.4.11) Luminancias relativas usadas: ink-900 .00792 · ink-800 .01989 · brand-700 .06969 · ink-600 .10672 brand-500 .17350 · accent .29742 · brand-300 .39278 sand-100 .85160 · paper .94915 · error #A8341F .10883 ── TEXTO SOBRE BANDA OSCURA ────────────────────────────────────────────── paper / ink-900 17.25 OK texto del hero y del pie paper / ink-800 14.30 OK texto de banda ink-800 brand-300 / ink-900 7.64 OK texto secundario en oscuro brand-300 / ink-800 6.34 OK texto secundario en oscuro accent / ink-900 6.00 OK eyebrow, cifras, foco accent / ink-800 4.97 OK eyebrow, cifras, foco brand-500 / ink-900 3.86 NO solo texto grande o bordes brand-500 / ink-800 3.20 NO solo texto grande o bordes ── TEXTO SOBRE BANDA CLARA ─────────────────────────────────────────────── ink-900 / paper 17.25 OK cuerpo y titulares ink-900 / sand-100 15.57 OK cuerpo y titulares ink-800 / paper 14.30 OK ink-800 / sand-100 12.90 OK brand-700 / paper 8.35 OK links, eyebrow, acentos en claro brand-700 / sand-100 7.53 OK links, eyebrow, acentos en claro ink-600 / paper 6.38 OK texto secundario ink-600 / sand-100 5.75 OK texto secundario brand-500 / paper 4.47 NO falla por 0.03. Usar brand-700. brand-500 / sand-100 4.03 NO usar brand-700 accent / paper 2.88 NO PROHIBIDO. Regla 2. accent / sand-100 2.60 NO PROHIBIDO. Regla 2. ── TEXTO SOBRE BOTÓN ───────────────────────────────────────────────────── paper / brand-700 8.35 OK botón primario. Este es el fondo bueno. paper / brand-500 4.47 NO descartado como fondo de botón ink-900 / accent 6.00 OK único uso válido de accent como fondo ── ERROR DE FORMULARIO ─────────────────────────────────────────────────── El formulario vive sobre la banda ink-900 con un velo blanco al 5%, lo que da un fondo efectivo de #132329 (luminancia .01501). Los rojos oscuros no sirven ahí: se usa un salmón claro. #FFB3A3 / #132329 9.41 OK texto del mensaje de error #FFB3A3 / ink-900 10.56 OK borde del campo inválido paper / #132329 15.37 OK texto de los campos ── NO-TEXTO: FOCO, BORDES, ESTADOS (umbral 3.0) ────────────────────────── brand-700 / paper 8.35 OK anillo de foco en banda clara brand-700 / sand-100 7.53 OK anillo de foco en banda clara brand-300 / ink-900 7.64 OK anillo de foco en banda oscura brand-300 / ink-800 6.33 OK anillo de foco en banda oscura brand-300 / brand-700 3.70 OK anillo de foco en barra móvil ink-600 / paper 6.38 OK borde de input #A8341F / paper 6.29 OK borde de input inválido brand-500 / paper 4.47 OK borde decorativo, sin texto encima brand-500 / ink-900 3.86 OK borde decorativo, sin texto encima ========================================================================== */