/* Modernist — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */ /* OJO: este fichero YA NO es idéntico al export del handoff (handoff/prototipo/_ds/modernist-*). Se le ha añadido el TEMA OSCURO —el propio comentario de las sombras, más abajo, ya lo anticipaba— y el token --color-sobre-acento. Si algún día se re-exporta el sistema, hay que volver a traer los dos bloques a mano. */ @import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;800&display=swap'); :root { --color-bg: #f3f2f2; --color-surface: #eae9e9; --color-text: #201e1d; --color-accent: #ec3013; --color-accent-2: #e15b47; --color-divider: color-mix(in srgb, #201e1d 40%, transparent); /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the same step of any role matches the others in visual value. */ --color-neutral-100: #f8f4f4; --color-neutral-200: #eae7e7; --color-neutral-300: #d7d3d3; --color-neutral-400: #bab6b6; --color-neutral-500: #9b9797; --color-neutral-600: #7d7979; --color-neutral-700: #605d5d; --color-neutral-800: #444141; --color-neutral-900: #2d2b2b; --color-accent-100: #fff2ef; --color-accent-200: #ffe0d9; --color-accent-300: #ffc4b8; --color-accent-400: #ff9783; --color-accent-500: #ff563c; --color-accent-600: #dd2b0f; --color-accent-700: #ae1800; --color-accent-800: #7c1405; --color-accent-900: #4d170e; --color-accent-2-100: #fff2ef; --color-accent-2-200: #ffe0da; --color-accent-2-300: #ffc4b9; --color-accent-2-400: #ff9784; --color-accent-2-500: #ef6853; --color-accent-2-600: #c94b39; --color-accent-2-700: #9e3526; --color-accent-2-800: #71261b; --color-accent-2-900: #471d16; --font-heading: "Archivo", system-ui, sans-serif; --font-heading-weight: 800; --font-body: "Archivo", system-ui, sans-serif; --space-1: 4.0px; --space-2: 8.0px; --space-3: 12.0px; --space-4: 16.0px; --space-6: 24.0px; --space-8: 32.0px; --radius-sm: 0px; --radius-md: 0px; --radius-lg: 0px; /* Elevation — derived from the ground: soft ink-tinted shadows on a light theme, a hairline edge + ambient darkness on a dark one. */ --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent); --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent); --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent); /* Qué color lleva el texto que va ENCIMA de un relleno de acento (botón primario, pestaña activa, palabra que se canta). Era blanco a mano en cinco sitios; hace falta como token porque en tema oscuro el acento sube de brillo y el blanco encima se queda en 3,1:1. */ --color-sobre-acento: #ffffff; /* Las reglas estructurales de 2 px («2px solid tinta», la firma del sistema). Es un token y no --color-text porque en oscuro una raya de tinta clara a plena potencia recorre toda la página y la deja con pinta de wireframe. El precedente estaba en casa: el modo proyección ya bajaba sus barras a blanco al 30 %. */ --color-regla: var(--color-text); /* que las barras de scroll y los controles nativos —la «×» del — sepan sobre qué fondo se dibujan */ color-scheme: light; } /* ══════════════════════════════════════════════════════════════════════════ TEMA OSCURO. Lo activa , que el script en línea del estampa antes del primer pintado (el mismo patrón que data-vista-letra). Aquí no se toca ni una regla: se redefinen LAS MISMAS variables. Las dos rampas se espejan EN ROL, no en valor: en claro el paso 100 es el más cercano al papel y el 900 el más cercano a la tinta, y en oscuro sigue siendo exactamente eso, con el papel negro. Por eso cada uso que ya existe —neutral-600 para texto secundario, accent-100 para el fondo de una fila en hover, accent-700 para enlaces y acordes— sigue significando lo mismo. Los pasos 100-300 de la rampa de acento NO son el espejo estricto: se dejan por ENCIMA del fondo. Un hover tiene que levantar, y con el espejo exacto la fila se hundía por debajo de la página sobre la que está. Contrastes medidos contra el fondo real de cada uso (y también sobre la fila en hover, que es un fondo compuesto): ninguno queda por debajo del que ya tiene el tema claro. Texto 15,99:1 · .autor 4,59 (claro 3,85) · .cita 6,97 (5,83) · .letra-linea 11,45 (9,04) · enlaces 7,68 (6,41) · .kicker 5,77 (3,76) · tinta sobre acento 5,77 (4,20). ══════════════════════════════════════════════════════════════════════ */ :root[data-tema="oscuro"] { color-scheme: dark; --color-bg: #191716; /* el mismo negro que ya usaba el modo proyección */ --color-surface: #211f1e; --color-text: #f3f2f2; --color-accent: #ff5a3f; /* el rojo de marca sube de brillo: #ec3013 sobre este negro se queda en 2,9:1 y no vale ni para un rótulo */ --color-accent-2: #f4785f; --color-divider: color-mix(in srgb, #f3f2f2 32%, transparent); --color-sobre-acento: #191716; --color-regla: color-mix(in srgb, var(--color-text) 70%, transparent); /* 8,28:1 */ --color-neutral-100: #2b292a; --color-neutral-200: #322f30; --color-neutral-300: #3f3d3d; --color-neutral-400: #494546; --color-neutral-500: #666362; --color-neutral-600: #858080; --color-neutral-700: #a4a1a1; --color-neutral-800: #d2cece; --color-neutral-900: #e7e4e3; --color-accent-100: #48130a; --color-accent-200: #58170e; --color-accent-300: #771506; --color-accent-400: #9a1703; --color-accent-500: #d1270a; --color-accent-600: #f54a30; --color-accent-700: #ff8874; --color-accent-800: #ffc1b4; --color-accent-900: #ffded7; --color-accent-2-100: #411811; --color-accent-2-200: #4f1f17; --color-accent-2-300: #6a241a; --color-accent-2-400: #8a2f21; --color-accent-2-500: #bb4433; --color-accent-2-600: #e15e49; --color-accent-2-700: #fb8a76; --color-accent-2-800: #ffc0b5; --color-accent-2-900: #ffddd7; /* «a hairline edge + ambient darkness on a dark one», que es justo lo que pide el comentario de la elevación aquí arriba: una sombra de tinta no se ve sobre tinta */ --shadow-sm: 0 1px 2px color-mix(in srgb, #000 55%, transparent); --shadow-md: 0 0 0 1px color-mix(in srgb, var(--color-text) 8%, transparent), 0 3px 10px color-mix(in srgb, #000 60%, transparent); --shadow-lg: 0 0 0 1px color-mix(in srgb, var(--color-text) 10%, transparent), 0 12px 32px color-mix(in srgb, #000 70%, transparent); } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); } .grayscale{filter:grayscale(1) contrast(1.08)} /* ══════════════════════════════════════════════════════════════════════════ Components — built with the tokens above. Plain CSS on plain HTML: no JavaScript, no build step. Each class is documented in readme.md and demonstrated in foundations/ and components/. ══════════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2); } h1 { font-size: 42px; } h2 { font-size: 32px; } h3 { font-size: 25px; } h4 { font-size: 20px; } h5 { font-size: 16px; } h6 { font-size: 13px; } h6 { letter-spacing: 0.08em; text-transform: uppercase; } p { margin: 0 0 var(--space-3); } a { color: var(--color-accent); text-underline-offset: 3px; } img { display: block; max-width: 100%; } figure { margin: 0; } figcaption { font-size: 11px; margin-top: var(--space-1); color: color-mix(in srgb, var(--color-text) 55%, transparent); } .text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); } :focus { outline: none; } :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } ::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); } /* — rules — */ .hr { height: 2px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); } /* — buttons — */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px — the pair sits side by side in sign-up rows */ background: transparent; border: 1px solid transparent; padding: var(--space-2) calc(var(--space-3) * 1.2); border-radius: var(--radius-md); } .btn svg { display: block; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--color-accent); color: var(--color-sobre-acento); } .btn-primary:hover { background: var(--color-accent-600); } .btn-primary:active { background: var(--color-accent-700); } /* con la rampa espejada, «un paso más lejos del papel» son otros peldaños */ :root[data-tema="oscuro"] .btn-primary:hover { background: var(--color-accent-700); } :root[data-tema="oscuro"] .btn-primary:active { background: var(--color-accent-800); } .btn-secondary { border-color: var(--color-divider); } .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); } .btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); } .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); } .btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); } .btn-icon { width: 36px; height: 36px; padding: 0; } .btn-block { width: 100%; margin-top: var(--space-2); justify-content: flex-start; text-align: left; } /* — forms — */ .field > label { display: block; font-size: 12px; margin-bottom: 5px; color: color-mix(in srgb, var(--color-text) 70%, transparent); } .input { width: 100%; min-height: 36px; padding: 6px 10px; font: inherit; font-size: 14px; color: var(--color-text); caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); } .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; } textarea.input { min-height: 90px; resize: vertical; } .radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; } .radio input, .seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .radio .dot { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 1.5px solid var(--color-divider); } .radio:hover .dot { border-color: var(--color-accent); } .radio input:checked + .dot { border-color: var(--color-accent); background: var(--color-accent); box-shadow: inset 0 0 0 4px var(--color-bg); } .radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; } .seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-md); } .seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; } .seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); } .seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-sobre-acento); } .seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); } .seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* — cards — */ .card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface); } .card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); } .card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; } .card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; } .card-meta { display: flex; align-items: center; gap: 6px; font-size: 11px; color: color-mix(in srgb, var(--color-text) 50%, transparent); } .elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); } /* — tags — */ .tag { display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em; padding: 3px 10px; border-radius: calc(var(--radius-md) * 0.75); } .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); } .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); } .tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); } .tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); } /* — navigation — */ .nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 2px solid var(--color-divider); } .nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; } .nav a { color: inherit; text-decoration: none; font-size: 14px; } .nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); } /* — tables — */ .table { width: 100%; border-collapse: collapse; font-size: 14px; } .table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); padding: var(--space-2); border-bottom: 2px solid var(--color-divider); } .table td { padding: var(--space-2); border-bottom: 1px solid var(--color-divider); } .table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); } /* — dialog — */ .dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent); } /* un velo es oscuro en los dos temas: con la rampa espejada, neutral-900 es casi blanco */ :root[data-tema="oscuro"] .dialog-backdrop { background: color-mix(in srgb, #000 65%, transparent); } .dialog { width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); } .dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; } .dialog-body { font-size: 14px; opacity: 0.85; } .dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }