/* Tokens del sistema de diseño de Resin Ledger. Valores de $PAQUETE/desarrollo/sistema-diseno/SISTEMA-DISENO.md, cuyas nueve comprobaciones están en verde. NINGÚN valor se elige aquí. Regla del artículo V de la constitución: tokens POR ROL, nunca por valor. Se usa --color-text-primary, jamás --azul. Ningún componente puede referenciar un valor crudo; si necesita uno que no existe, se añade el token, no el valor. */ /* Orden de cascada explícito. Se declara una vez, aquí, porque tokens.css es la primera hoja que carga. Existe por dos defectos reales de esta misma construcción: `.hoja-imprimible { padding: … }` anuló el `padding-inline` de la vía y dejó la hoja pegada a los bordes, y `.consentimiento { display: flex }` ganó a `[hidden]` y el banner se veía antes de que corriera su script. Las dos veces el problema fue el orden de la cascada, no el valor. Con capas, un componente NO puede pisar una regla de base por accidente de especificidad: para hacerlo hay que escribirlo en la capa de utilidades a propósito. */ @layer tokens, base, componentes, utilidades; @layer tokens { :root { /* ---------------------------------------------------------------- color Tema claro. Los 28 pares en uso están verificados en VALIDACION.md. --status-verified y --status-caution llevan las DOS correcciones WCAG ya aplicadas: los valores del brief de marca (#3F7F7C y #B87512) no alcanzaban AA sobre Warm Paper. No se revierten. */ --color-surface-page: #F7F4EC; /* Warm Paper */ --color-surface-raised: #FFFFFF; --color-surface-sunken: #EFEBE0; --color-surface-inverse: #17324D; --color-text-primary: #17324D; /* 11.94 sobre page, 13.13 sobre raised */ --color-text-secondary: #4A5B6E; /* 6.34 / 6.97 */ --color-text-inverse: #F7F4EC; /* 11.94 sobre surface-inverse */ --color-border-subtle: #C8C0AC; /* 1.65 — separador, no portador de significado */ --color-border-strong: #6E7B88; /* 3.94 / 4.33 */ --color-action-primary: #2F6F89; /* 5.09 / 5.59 */ --color-action-hover: #245A70; /* 6.89 */ --color-action-active: #1B4557; /* 9.39 */ --color-focus-ring: #17324D; /* 11.94 / 13.13 */ --color-status-verified: #3C7977; /* 4.56 / 5.01 — corregido de #3F7F7C */ --color-status-caution: #9C630F; /* 4.54 / 4.99 — corregido de #B87512 */ --color-status-stop: #A73535; /* 5.96 / 6.55 */ /* Región publicitaria. NUNCA comparte estos tokens con una tarjeta editorial: la guarda 1 prohíbe que un anuncio parezca recomendación del editor. */ --color-ad-region-surface: #EFEBE0; --color-ad-region-border: #8A8371; /* 3.43 */ --color-ad-region-label: #4A5B6E; /* 5.85 sobre ad-region-surface */ /* ====================================================== escalas tonales Rediseño del 2026-08-30. Las escalas se derivan con `color-mix()` de los MISMOS dos matices que ya usan las figuras, no de matices nuevos. Es la restricción que decide el rediseño entero: `#17324D`, `#2F6F89`, `#A73535`, `#9C630F`, `#3C7977` y `#F7F4EC` están **incrustados en 40 SVG** —1.630 apariciones solo del primero— y el generador vive fuera del paquete. Cualquier matiz nuevo haría que todos los diagramas parecieran de otro sitio. Así que la paleta no cambia de tono: gana PROFUNDIDAD. Derivarlas en CSS y no a mano tiene su gracia: si algún día se regeneran las figuras con otro matiz, se cambia el matiz base y la escala entera sigue. Antes había un valor suelto por rol y ninguna relación entre ellos. */ --ink: #17324D; --acc: #2F6F89; --ink-50: color-mix(in oklab, var(--ink) 6%, white); --ink-100: color-mix(in oklab, var(--ink) 14%, white); --ink-200: color-mix(in oklab, var(--ink) 28%, white); --ink-300: color-mix(in oklab, var(--ink) 45%, white); --ink-400: color-mix(in oklab, var(--ink) 70%, white); --ink-500: var(--ink); --ink-700: color-mix(in oklab, var(--ink) 78%, black); --ink-900: color-mix(in oklab, var(--ink) 55%, black); --acc-50: color-mix(in oklab, var(--acc) 8%, white); --acc-100: color-mix(in oklab, var(--acc) 16%, white); --acc-200: color-mix(in oklab, var(--acc) 32%, white); --acc-500: var(--acc); --acc-600: color-mix(in oklab, var(--acc) 86%, black); --acc-700: color-mix(in oklab, var(--acc) 72%, black); /* ------------------------------------------------------------ superficies Una sola superficie plana era el motivo de que el sitio se viera «básico»: nada separaba una zona de otra. Ahora hay cuatro, y cada una tiene trabajo. `surface-canvas` es EXACTAMENTE el fondo que las 42 figuras llevan dentro: al enmarcarlas con él, la figura deja de flotar y —de paso— el día que se cambie el fondo de página no hará falta regenerar nada. */ --color-surface-tinted: #E4EDF1; /* 1.08:1 vs papel — zonificación */ --color-surface-canvas: #F7F4EC; /* el fondo incrustado en las figuras */ /* Borde algo más presente que el anterior #C8C0AC (1.65:1): 1.73:1. */ --color-border-subtle-2: #C2BCA9; --color-border-accent: color-mix(in oklab, var(--acc) 32%, white); /* --------------------------------------------------------------- elevación El sistema prohibía sombras para elevar EN TEMA OSCURO. El tema es claro y único, y aquí la sombra acompaña al borde, no lo sustituye: la regla «ninguna superficie elevada se identifica solo por relleno» se mantiene. Tinte del propio ink en vez de negro puro, que sobre papel cálido ensucia. */ --sombra-sutil: 0 1px 2px color-mix(in oklab, var(--ink) 8%, transparent); --sombra-media: 0 2px 4px color-mix(in oklab, var(--ink) 6%, transparent), 0 8px 16px -6px color-mix(in oklab, var(--ink) 12%, transparent); /* ---------------------------------------------------------- tipografía IBM Plex Sans (OFL 1.1). Escala modular 1.25 sobre base 17 px. El interlineado va en múltiplos de 4 px para cuadrar con la rejilla. */ --font-family-sans: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-family-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* DESVIACIÓN DE SISTEMA-DISENO.md · 2026-08-30 · decisión del propietario. El cuerpo pasa de 17 px a 19 px y la vía de lectura de 600 px a 680 px. Razón: a 600 px la columna se percibía estrecha en pantallas anchas. Medido antes de decidir: a 600 px y 17 px la línea daba 78 caracteres, ya en el extremo del rango cómodo, así que ENSANCHAR SIN MÁS la habría llevado a 94. Subiendo el cuerpo a la vez, 680 px dan 79 caracteres: misma medida de lectura, bloque un 25 % más grande. La escala 1.25 se recalcula desde la nueva base, que es el método que el propio sistema declara, en vez de dejar los títulos descolgados del cuerpo. SISTEMA-DISENO.md y VALIDACION.md siguen diciendo 17/600: hay que actualizarlos. Ver D33 en el registro de aprobaciones. */ /* Los títulos son FLUIDOS entre 390 px y 1280 px de viewport. Antes daban un salto brusco en el punto de ruptura de 640 px —de 37 px a 46 px de golpe— y entre 640 y 1280 se quedaban clavados. `clamp()` interpola: en los dos extremos vale exactamente lo que valía antes, así que ningún tamaño comprobado cambia; lo que desaparece es el escalón. El cuerpo NO es fluido: 19 px en todas partes, como manda el sistema. */ --font-size-h1: clamp(37px, 2.066rem + 1.011vw, 46px); --line-height-h1: 1.2; --font-size-h2: clamp(30px, 1.683rem + 0.787vw, 37px); --line-height-h2: 1.2; --font-size-h3: clamp(24px, 1.336rem + 0.674vw, 30px); --line-height-h3: 1.2; --font-size-h4: clamp(21px, 1.230rem + 0.337vw, 24px); --line-height-h4: 1.33; --font-size-lead: 21px; --line-height-lead: 36px; --font-size-body: 19px; --line-height-body: 32px; --font-size-body-small: 17px; --line-height-body-small: 28px; --font-size-caption: 15px; --line-height-caption: 24px; --font-size-label: 15px; --line-height-label: 24px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --letter-spacing-h1: -0.02em; --letter-spacing-h2: -0.01em; --letter-spacing-caption: 0.01em; --letter-spacing-label: 0.08em; /* ------------------------------------------------------------ espaciado Base 4 px. Ningún valor fuera de la escala (RNF-021 CA-2). */ --space-2xs: 2px; /* ajuste óptico, nunca layout */ --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; /* relleno interior por defecto */ --space-xl: 24px; --space-2xl: 32px; --space-3xl: 48px; /* entre secciones — y separación mínima de región de anuncio */ --space-4xl: 64px; --space-5xl: 96px; /* ------------------------------------------------------- radios y bordes */ --radius-none: 0; /* tablas de datos, celdas */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 22px; /* tarjetas y paneles grandes */ --radius-full: 999px; /* píldoras y contadores */ --border-width-hairline: 1px; --border-width-default: 1.5px; --border-width-emphasis: 2.5px; /* recuadros de parada y aviso */ /* DISCREPANCIA DEL PAQUETE, señalada aquí en vez de resuelta a ojo: componentes/aviso-seguridad.md pide borde de 2 px para el nivel «precaución», y ese grosor NO está en la escala de SISTEMA-DISENO.md (1 / 1.5 / 2.5). Se declara como token para no meter un valor crudo en el componente (artículo V), pero la escala y la ficha deberían reconciliarse: o la escala gana un paso, o la ficha usa `emphasis`. */ --border-width-notice: 2px; /* ------------------------------------------------------------- sombras Tres niveles y ninguno decorativo. La tarjeta editorial es la ÚNICA superficie con shadow-raised; la región de anuncio no lleva ninguna. */ --shadow-none: none; --shadow-raised: 0 1px 2px rgba(23, 50, 77, 0.06), 0 4px 12px rgba(23, 50, 77, 0.05); --shadow-overlay: 0 8px 32px rgba(23, 50, 77, 0.16); /* ----------------------------------------------------------- movimiento Ninguna animación supera 300 ms ni se repite en bucle. Prohibidos: ease-spring, rebotes y toda animación por scroll. */ --duration-instant: 50ms; --duration-fast: 100ms; --duration-normal: 200ms; --duration-moderate: 300ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); --ease-decelerate: cubic-bezier(0, 0, 0.2, 1); --ease-accelerate: cubic-bezier(0.3, 0, 1, 0.3); /* ------------------------------------------------------- grid y anchos Tres vías. El cuerpo no se ensancha nunca para llenar la pantalla. */ --via-lectura: 680px; /* 79 caracteres a 19 px, medidos en el navegador */ --via-ancha: 1000px; /* figuras, tablas de datos, calculadoras */ --via-completa: 1200px; /* cabecera, pie, portada */ --grid-margin-base: 16px; --grid-gutter-base: 16px; --grid-margin-sm: 24px; --grid-gutter-sm: 24px; --grid-margin-md: 32px; --grid-gutter-md: 24px; --grid-margin-lg: 48px; --grid-gutter-lg: 32px; } /* UN SOLO TEMA, EL CLARO. `prefers-color-scheme` NO se atiende, y es deliberado: 42 de las 51 figuras del paquete llevan fondo claro fijo, con 751.000 px² de media. Servirlas sobre un lienzo oscuro las convertiría en recortes luminosos. La tabla del tema oscuro está verificada en SISTEMA-DISENO.md pero NO ADOPTADA. Se adopta cuando existan variantes oscuras de esas 42 figuras, no antes. De paso elimina el problema de los creativos publicitarios en oscuro. */ :root { color-scheme: light; } }