/* --------------------------------------------------------------------------- tokens.css - Sistema editorial y de identidad cata-joaco · GATE 4A QUE ES ESTE ARCHIVO ------------------- El unico lugar donde se decide como se ve el sistema. Identidad, color, papel, marco, tipografia, escala editorial, ritmo de espaciado, radios e intensidad ornamental viven aqui y solo aqui. Solo declara VARIABLES. Ninguna regla, ningun selector de componente. Los componentes viven en la capa de interfaz (invitation.css, admin.css). LO QUE NO VA AQUI ----------------- Ninguna imagen. Los assets se declaran en art.css, que es otra capa. CAMBIO RESPECTO DE TANDA 04 --------------------------- Hasta GATE 4A la paleta era neutra y provisional, y la escala tipografica existia pero NO la consumia nadie: los tamanos estaban escritos a mano en cada archivo. Cambiar una variable no cambiaba nada. Eso se corrige aqui. Ver docs/EDITORIAL_SYSTEM.md para el razonamiento completo. --------------------------------------------------------------------------- */ :root { /* ========================================================================= 0. IDENTIDAD CONGELADA Los seis colores madre, congelados en PATCH 3B.1. No se agregan mas y no se modifican. NO SE USAN DIRECTAMENTE EN NINGUN COMPONENTE. Solo alimentan los tokens funcionales de la seccion 1. Esa separacion es lo que permite decir "el boton primario usa tinta" en vez de "el boton primario es #383431": si manana la tinta cambia, cambia en un sitio. ========================================================================= */ --id-ivory: #F3EDE2; /* warm ivory · el papel */ --id-sepia: #76695E; /* soft sepia · trazo secundario */ --id-charcoal: #383431; /* warm charcoal · trazo principal, texto */ --id-sage: #8D947B; /* muted sage · vegetacion, acento frio */ --id-sakura: #C9AAA2; /* soft cherry blossom pink · la firma */ --id-gold: #B49A72; /* aged sand gold · marco, filete */ /* ========================================================================= 1. COLOR FUNCIONAL Derivado de la identidad. Cada asignacion esta condicionada por contraste medido sobre el papel (#F3EDE2), no por gusto: charcoal 10.58:1 sirve para texto y para fondo de accion sepia 4.56:1 sirve para texto secundario y para borde perceptible sage 2.71:1 NO sirve para texto ni para borde de control gold 2.31:1 NO sirve para texto. Solo filete decorativo sakura 1.85:1 NO sirve para texto. Solo acento pictorico Cuatro de los seis colores no pueden llevar texto. Es esperable: la paleta se congelo para ilustrar, no para operar una interfaz. Por eso existe esta capa. ========================================================================= */ /* Texto */ --color-ink: var(--id-charcoal); /* texto principal */ --color-ink-soft: var(--id-sepia); /* texto secundario, etiquetas */ --color-ink-inverse: var(--id-ivory); /* texto sobre superficie oscura */ /* Accion. Tinta sobre papel: es lo mas legible y lo mas silencioso. Ni oro ni sakura pueden sostener texto encima. */ --color-accent: var(--id-charcoal); --color-accent-contrast: var(--id-ivory); --color-accent-soft: var(--id-sepia); /* accion secundaria */ /* Bordes. Dos tipos, y la diferencia importa: decorativo filete de oro. Adorna. No comunica nada de control debe distinguirse del fondo o el campo desaparece */ --border-decorative: var(--id-gold); --border-control: var(--id-sepia); --border-strong: var(--id-charcoal); /* Foco. Debe verse siempre: es como navega quien usa teclado. Oro y sakura no alcanzan el minimo perceptible. */ --color-focus: var(--id-charcoal); --focus-width: 2px; --focus-offset: 2px; /* Deshabilitado */ --color-disabled-ink: var(--id-sepia); --disabled-opacity: .45; /* Acentos pictoricos. Decorativos por definicion: nunca llevan texto encima ni comunican estado. */ --color-sakura: var(--id-sakura); --color-sage: var(--id-sage); /* ------------------------------------------------------------------------- ESTADOS SEMANTICOS · DELIBERADAMENTE FUERA DE LOS SEIS La identidad congelada no tiene vocabulario de estado: no hay un "si", un "no" ni un "atencion". Y forzarlos desde la paleta seria peor que inventarlos: sakura es la firma de la pareja, usarla para "no asistira" la vacia de significado, y sage no alcanza contraste de texto. Estos tres se conservan de TANDA 03 sin cambios. Todos superan AA sobre el papel nuevo (5.28 / 6.51 / 4.75), asi que la traduccion de identidad no degrado la legibilidad del RSVP. Su significado es semantico, no decorativo: no se reutilizan para adornar, porque entonces dejan de comunicar estado. DECISION ABIERTA: si se prefiere armonizarlos con la paleta, es un cambio de dos lineas. Pero la capacidad de confirmar asistencia manda sobre la pureza cromatica. ------------------------------------------------------------------------- */ --color-yes: #1f6f43; --color-yes-bg: #eef4ef; --color-no: #8a3b3b; --color-no-bg: #f7eeec; --color-warn: #8a6100; --color-warn-bg: #f7f0e2; /* ========================================================================= 2. PAPEL Y FONDO UN SOLO PAPEL. Antes habia tres superficies (blanco, blanco roto, gris) y las tarjetas se distinguian por relleno. Con la identidad congelada eso deja de tener sentido: la coleccion entera esta dibujada sobre un unico marfil, y las ilustraciones se apoyaran encima. Si el fondo de la pagina fuera de un tono y el PNG de otro, se veria el borde del archivo. Un solo valor lo evita por construccion. Los bloques se separan con filete y con aire, no con relleno. Eso es tambien lo que pide el registro: espacio negativo activo, sin exceso de cajas. ========================================================================= */ --paper: var(--id-ivory); /* superficie de bloques y campos */ --paper-muted: var(--id-ivory); /* alias conservado por compatibilidad */ --backdrop: var(--id-ivory); /* fondo de la pagina */ --backdrop-image: none; /* textura; la consume art.css */ --backdrop-blend: normal; /* ========================================================================= 3. MARCO El doble filete fino en oro antiguo es un rasgo congelado del estilo, no un adorno opcional. Aqui existe como variable; su dibujo real llegara como border-image cuando exista la cenefa ilustrada. ========================================================================= */ --frame-color: var(--border-decorative); --frame-width: 1px; --frame-image: none; --frame-slice: 0; --frame-inset: 0px; /* Filete de separacion entre bloques. Mas tenue que el marco: separa sin encajonar. */ --rule-color: var(--border-decorative); --rule-width: 1px; /* ========================================================================= 4. TIPOGRAFIA · FAMILIAS Se declara por ROL, no por nombre de fuente. UNA SOLA FAMILIA DE IDENTIDAD, Y NO DOS. El display carga toda la identidad porque es donde va el ojo: los nombres, la fecha, los titulos de seccion. El cuerpo y los formularios usan la fuente del sistema. Por que no una segunda familia para el cuerpo: * El invitado llega desde WhatsApp, muchas veces con datos moviles. Cada archivo de fuente es peso que paga el. * La fuente del sistema es la mejor ajustada a su pantalla y cuesta cero. En formularios y textos pequenos gana casi siempre. * Dos familias es un sistema; tres o mas es una coleccion de fuentes. ESTADO: la familia propuesta para display es Cormorant Garamond, por su trazo de alto contraste, que es el equivalente tipografico del grabado de linea fina del estilo congelado. EL ARCHIVO DE FUENTE TODAVIA NO SE CARGA. Mientras no exista, la pila de respaldo entrega serifas de transicion presentes en iOS, Android, macOS y Windows: el resultado hoy ya es coherente, y no depende de una descarga. Ver docs/EDITORIAL_SYSTEM.md §3. ========================================================================= */ --font-display: "Cormorant Garamond", "Hoefler Text", "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", Georgia, serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-ui: var(--font-body); --font-data: var(--font-display); /* ========================================================================= 5. ESCALA EDITORIAL Siete roles. Cada uno define familia, tamano, peso, interlineado y tracking, para que ningun componente vuelva a decidirlos por su cuenta. Los tamanos fluidos usan clamp(): crecen con la ventana entre un minimo y un maximo, sin escalones bruscos. Se usa solo en DISPLAY y HEADING, donde el salto entre telefono y escritorio es grande. BODY, LABEL, ACTION y los campos son FIJOS a proposito. Un formulario que cambia de tamano mientras se rota el telefono se siente inestable, y bajar de 16px en un campo hace que iOS haga zoom solo al enfocarlo. ========================================================================= */ /* DISPLAY · nombres y grandes momentos */ --display-font: var(--font-display); --display-size: clamp(2.125rem, 1.55rem + 2.6vw, 3.25rem); --display-weight: 500; --display-leading: 1.1; --display-tracking: .005em; /* HEADING · titulos de seccion */ --heading-font: var(--font-display); --heading-size: clamp(1.375rem, 1.2rem + .8vw, 1.75rem); --heading-weight: 500; --heading-leading: 1.28; --heading-tracking: .01em; /* SUBHEADING · titulos dentro de un bloque */ --subheading-font: var(--font-body); --subheading-size: 1rem; --subheading-weight: 600; --subheading-leading: 1.4; --subheading-tracking: 0; /* BODY · informacion */ --body-font: var(--font-body); --body-size: 1.0625rem; /* 17px. Probado en movil en TANDA 03 */ --body-weight: 400; --body-leading: 1.6; --body-tracking: 0; /* LABEL · etiquetas de formulario */ --label-font: var(--font-ui); --label-size: .875rem; --label-weight: 500; --label-leading: 1.4; --label-tracking: .015em; /* MICROCOPY · ayudas, estados, progreso */ --micro-font: var(--font-ui); --micro-size: .8125rem; --micro-weight: 400; --micro-leading: 1.5; --micro-tracking: .01em; /* ACTION · botones */ --action-font: var(--font-ui); --action-size: 1rem; --action-weight: 600; --action-leading: 1.2; --action-tracking: .01em; /* DATA · fecha, hora, lugar, elementos estructurados. En serifa y con tracking amplio: es lo que convierte una linea de datos en una linea de invitacion. */ --data-font: var(--font-data); --data-size: 1.0625rem; --data-weight: 500; --data-leading: 1.45; --data-tracking: .06em; /* EYEBROW · versalitas sobre un titulo */ --eyebrow-font: var(--font-ui); --eyebrow-size: .75rem; --eyebrow-weight: 500; --eyebrow-leading: 1.4; --eyebrow-tracking: .14em; /* INPUT · nunca por debajo de 1rem */ --input-size: 1rem; --input-leading: 1.4; /* Escala cruda, conservada: la usan el panel y quien necesite un tamano suelto sin rol editorial. */ --text-xs: .75rem; --text-sm: .875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --leading-tight: 1.2; --leading-normal: 1.55; --tracking-wide: .08em; /* ========================================================================= 6. ESPACIADO Y RITMO Escala de 4px. Que sea una escala y no numeros sueltos es lo que permite que todo respire mas sin desalinearse: se multiplica --space-unit y el sistema entero se expande. ========================================================================= */ --space-unit: .25rem; --space-1: calc(var(--space-unit) * 1); /* 4px */ --space-2: calc(var(--space-unit) * 2); /* 8px */ --space-3: calc(var(--space-unit) * 3); /* 12px */ --space-4: calc(var(--space-unit) * 4); /* 16px */ --space-5: calc(var(--space-unit) * 5); /* 20px */ --space-6: calc(var(--space-unit) * 6); /* 24px */ --space-8: calc(var(--space-unit) * 8); /* 32px */ --space-10: calc(var(--space-unit) * 10); /* 40px */ --space-12: calc(var(--space-unit) * 12); /* 48px */ --space-16: calc(var(--space-unit) * 16); /* 64px */ --space-20: calc(var(--space-unit) * 20); /* 80px */ --space-24: calc(var(--space-unit) * 24); /* 96px */ /* ------------------------------------------------------------------------- RITMO SEMANTICO Cuatro escalones con nombre. La ventaja de nombrarlos es que la pregunta deja de ser "cuantos pixeles" y pasa a ser "que relacion hay entre estas dos cosas", que es la pregunta correcta y la que se responde igual en todas las pantallas. ------------------------------------------------------------------------- */ --rhythm-micro: var(--space-2); /* dentro de un elemento */ --rhythm-component: var(--space-4); /* entre elementos hermanos */ --rhythm-block: var(--space-8); /* entre bloques */ --rhythm-section: clamp(var(--space-12), 8vw, var(--space-20)); --rhythm-major: clamp(var(--space-16), 12vw, var(--space-24)); /* ------------------------------------------------------------------------- ANTES DE UNA SECCION ILUSTRADA La unica medida del sistema que escala con el ALTO de la ventana y no con el ancho. Tiene un motivo concreto. El resto de la pagina crece con el ancho: columna mas ancha, ilustracion mas alta. Pero el punto donde termina la primera pantalla lo decide el ALTO del telefono, y esas dos cosas no van juntas. Con un hueco fijo, el titulo de la seccion siguiente cae justo sobre el borde inferior en unos modelos y no en otros: medido, quedaba partido por la mitad en iPhone X y en iPhone 14. Al escalar con la altura, el empuje crece con la pantalla que lo necesita. Comprobado en ocho modelos, de iPhone SE a 16 Pro Max: en todos el titulo empieza claramente despues del pliegue, con 22 px de margen en el peor caso. NO es una regla atada a un dispositivo. No hay alturas fijas ni consultas por modelo: es una proporcion, y un navegador de escritorio la resuelve igual de bien. Los limites de 4rem y 8rem impiden que se descontrole en ventanas muy bajas o muy altas. ------------------------------------------------------------------------- */ --gap-before-art-section: clamp(4rem, 13vh, 8rem); /* Relaciones concretas exigidas por el sistema editorial */ --gap-title-content: var(--space-3); --gap-content-action: var(--space-6); --gap-section-section: var(--rhythm-section); --gap-art-text: var(--space-8); /* la ilustracion necesita aire */ --gap-art-ui: var(--space-10); /* mas todavia antes de un control */ /* Ancho maximo de lectura. Mas alla de esto el ojo pierde la linea al saltar de renglon. */ --measure: 34rem; --measure-narrow: 26rem; --measure-wide: 72rem; /* Respiracion lateral. Un solo valor para toda la experiencia publica. */ --gutter: 1.125rem; /* Altura tactil minima. Nada por debajo de esto se puede tocar con confianza estando de pie y con una mano. */ --touch-min: 3rem; --touch-comfortable: 3.25rem; /* ========================================================================= 7. RADIOS Contenidos a proposito. El estilo congelado es de filete recto y esquina geometrica: un radio grande lo contradice. ========================================================================= */ --radius-sm: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-pill: 999px; /* ========================================================================= 8. INTENSIDAD ORNAMENTAL De 0 a 1. Controla cuanto pesa la decoracion sobre el contenido. 0 sin ornamento. Estado actual, y siempre el del panel 0.4 presencia discreta 1 la grafica manda Existe para que "cuanto adorno" sea un dial y no una reescritura, y para poder bajarlo de golpe si en pruebas con gente real la ilustracion estorba la lectura, sin borrar el trabajo hecho. SIGUE EN 0. Ninguna ilustracion esta integrada todavia; subirlo antes de GATE 4B no mostraria nada y solo confundiria. ========================================================================= */ --ornament-intensity: 0; --ornament-opacity: var(--ornament-intensity); /* ========================================================================= 9. MOVIMIENTO ========================================================================= */ --motion-fast: 120ms; --motion-normal: 200ms; --ease: cubic-bezier(.2, .0, .2, 1); } /* --------------------------------------------------------------------------- Respeto por quien pide menos movimiento. No es un extra: para algunas personas la animacion produce mareo real. --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-normal: 0ms; } } /* --------------------------------------------------------------------------- Mas contraste si el sistema lo pide. El sepia esta en 4.56:1 sobre el papel: pasa AA, pero con poco margen. Quien active alto contraste recibe tinta en vez de sepia. --------------------------------------------------------------------------- */ @media (prefers-contrast: more) { :root { --color-ink-soft: var(--id-charcoal); --border-control: var(--id-charcoal); } } /* --------------------------------------------------------------------------- Impresion. La papeleria real se maqueta aparte con los archivos de la variante print. Pero si alguien imprime una pantalla, el resultado no deberia gastar tinta en fondo ni perder texto. --------------------------------------------------------------------------- */ @media print { :root { --backdrop: #ffffff; --paper: #ffffff; --backdrop-image: none; --ornament-intensity: 0; --frame-image: none; --color-ink: #000000; --color-ink-soft: #333333; } }