/* ========================================================================== Stackapital — tokens.css · la ÚNICA fuente de verdad del sistema (issue #26) Capas: primitivos de marca → roles → estados → tipografía → espacio/forma → movimiento. Todo lo demás (base, layout, components, utilities) SOLO consume variables de aquí; ningún otro fichero CSS define color, tipografía, radio ni easing. Únicas excepciones, con su motivo dentro: static/img/select-chevron.svg (#89 — el trazo va horneado porque un SVG usado como background-image no hereda currentColor) y el papel del PDF (apps/invoicing/static/invoicing/pdf.css — WeasyPrint no ejecuta var(), desviación documentada en AGENTS.md). Solo hay TEMA CLARO; los roles están pensados para que un futuro tema oscuro sea redefinir este fichero (o su bloque de roles) y nada más. Las fuentes están AUTOALOJADAS (los woff2 viven físicamente en apps/web/static/web/fonts/; aquí se referencian con la ruta relativa '../web/fonts/…', que resuelve igual en dev (staticfiles) y tras collectstatic — verificado en docs/06-sistema-diseno.md). Nada de Google Fonts: CSP 'self' y RGPD (docs/02 §10). ========================================================================== */ @layer tokens { /* --------------------------------------------------------------------- 1 · Primitivos de marca (docs/06-diseno-web.md — la paleta de la web) Los nombres son los canónicos que la landing ya usaba: cal, albero, azulejo, olivo, tinta… NUNCA se pintan directly en componentes: se usa el ROL. Excepción: la propia landing y el manual de marca, que pintan ilustración de marca y pueden usar el primitivo. --------------------------------------------------------------------- */ :root { --cal: #FBF7F0; /* fondo del producto */ --cal-2: #F4ECDF; /* bandas y superficies interiores */ --blanco: #FFFDF9; /* tarjetas */ --arena: #ECE2D2; /* superficie secundaria */ --tinta: #1F1A14; /* texto principal */ --tinta-2: #554B3E; /* texto secundario */ --tinta-3: #776C5D; /* texto terciario */ --albero: #FFAB60; /* color principal (vinculante) */ --albero-deep: #E98A3E; --albero-burn: #C4692A; --albero-ink: #B0541A; /* albero legible como texto pequeño (4,76:1 sobre cal) */ --brasa: #FF7A3A; /* ilustración */ --azulejo: #2C55A8; /* contrapunto frío, escaso */ --olivo: #8A9358; /* éxito */ --teja: #B3401E; /* NUEVO #26: el rojo terroso de error */ } /* --------------------------------------------------------------------- 2 · Roles — lo único que los componentes deben consumir --------------------------------------------------------------------- */ :root { --bg: var(--cal); /* fondo de página */ --bg-2: var(--cal-2); /* bandas, paneles apagados */ --surface: var(--blanco); /* tarjetas, cabeceras de tabla, inputs */ --surface-2: var(--arena); /* hover de fila, chips, superficies interiores */ --fg: var(--tinta); /* texto principal */ --fg-2: var(--tinta-2); /* texto secundario */ --fg-3: var(--tinta-3); /* texto terciario, metadatos */ --accent: var(--albero-ink); /* enlaces, énfasis, foco */ --on-accent: var(--tinta); /* texto sobre albero sólido (9,25:1) */ --line: rgba(31, 26, 20, 0.1); /* bordes sutiles */ --line-2: rgba(31, 26, 20, 0.18);/* bordes de control */ /* El scrim de overlays (#109): la tinta con alfa que tiñe el fondo bajo un diálogo modal — el ::backdrop del .modal y de la nav móvil, y el propio .modal cuando sin JS ES el overlay. Unificado al 45 % del modal (#93); antes la nav móvil iba al 40 %. Un futuro tema oscuro lo redefine aquí y no toca ninguna hoja. */ --scrim: rgba(31, 26, 20, 0.45); /* Sombras SIEMPRE templadas (marrón), nunca negras */ --shadow-sm: 0 2px 8px -2px rgba(122, 78, 34, 0.14); --shadow: 0 8px 24px -12px rgba(122, 78, 34, 0.22); --shadow-lg: 0 30px 60px -30px rgba(122, 78, 34, 0.3); /* Isotipo (capas inferiores, versión tinta) */ --iso-l1: #3A352D; --iso-l2: #1F1C17; --iso-l3: #0C0B09; } /* --------------------------------------------------------------------- 3 · Estados (issue #26: la marca no los tenía) Cada estado: texto legible (≥ 4,5:1 sobre cal Y sobre blanco, verificado), borde con el color fuerte y fondo suave al 10 % sobre blanco. Ratios texto/sobre cal · texto/sobre blanco · texto/sobre su fondo: éxito #4F5A26 → 6,97 · 7,32 · 6,62 aviso #8C4A18 → 6,33 · 6,65 · 5,91 info #2C55A8 → 6,62 · 6,96 · 5,98 error #A03A22 → 6,30 · 6,62 · 5,71 neutro #554B3E → 7,99 · 8,39 · 7,17 Rellenos sólidos solo con las parejas verificadas: tinta sobre albero (9,25) y sobre olivo (5,26); blanco sobre teja (5,63) y sobre azulejo (6,96). Blanco sobre albero-burn NO llega (3,83): el aviso no se pinta sólido con texto pequeño — siempre fondo suave. Activo de navegación (#91: .app-nav, .side-nav, .pagination): el texto va en --fg, nunca en --accent — accent/bg-2 se queda en 4,34 y no llega a AA en texto de 14-16 px. Parejas verificadas: fg/surface-2 (arena) 13,47 fg/bg-2 (cal-2) 14,73 El acento solo como indicador NO textual (barra o anillo): accent/surface-2 3,97 (≥ 3:1, WCAG 1.4.11) --------------------------------------------------------------------- */ :root { --ok: var(--olivo); --ok-text: #4F5A26; --warn: var(--albero-burn); --warn-text: #8C4A18; --info: var(--azulejo); --info-text: #2C55A8; --error: var(--teja); --error-text: #A03A22; --neutral: var(--tinta-2); --neutral-text: #554B3E; --ok-bg: color-mix(in srgb, var(--ok) 10%, var(--surface)); --warn-bg: color-mix(in srgb, var(--warn) 10%, var(--surface)); --info-bg: color-mix(in srgb, var(--info) 10%, var(--surface)); --error-bg: color-mix(in srgb, var(--error) 10%, var(--surface)); --neutral-bg: color-mix(in srgb, var(--neutral) 10%, var(--surface)); /* Los bordes sueltan un punto de saturación para no pesar */ --ok-border: color-mix(in srgb, var(--ok) 35%, var(--surface)); --warn-border: color-mix(in srgb, var(--warn) 35%, var(--surface)); --info-border: color-mix(in srgb, var(--info) 35%, var(--surface)); --error-border: color-mix(in srgb, var(--error) 35%, var(--surface)); --neutral-border: var(--line-2); } /* --------------------------------------------------------------------- 4 · Tipografía — familias y escala de interfaz Escala con clamp(): el backoffice se lee a 15–17 px de texto y los títulos de página respiran con Fraunces. Geist Mono + tabular-nums para cifras, dinero y cabeceras de tabla. --------------------------------------------------------------------- */ :root { --f-display: "Fraunces", Georgia, "Times New Roman", serif; --f-sans: "Geist", "Helvetica Neue", Arial, sans-serif; --f-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Escala de interfaz (títulos de página → ayuda) */ --text-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.25rem); /* título de página */ --text-xl: clamp(1.375rem, 1.15rem + 1vw, 1.625rem); /* título de tarjeta */ --text-lg: 1.125rem; /* apertura de sección */ --text-md: 1rem; /* texto de trabajo */ --text-sm: 0.875rem; /* denso, meta */ --text-xs: 0.75rem; /* etiquetas mono, badges */ --leading-tight: 1.15; --leading: 1.55; --tracking-label: 0.06em; /* mayúsculas mono */ } /* --------------------------------------------------------------------- 5 · Espacio y forma Escala de 4 px (los componentes usan el token, nunca px sueltos), radios de la marca y ancho de lectura. --------------------------------------------------------------------- */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --radius-lg: 28px; /* tarjetas hero, paneles */ --radius-md: 14px; /* tarjetas, inputs, dropdown */ --radius-sm: 8px; /* badges cuadrados, chips internos */ --radius-pill: 99px;/* botones, badges, paginación */ --container: 1200px; /* ancho máx. del contenido del backoffice */ --container-narrow: 720px; /* formularios y fichas */ --nav-w: 248px; /* barra lateral del shell */ --header-h: 64px; /* cabecera del shell */ } /* --------------------------------------------------------------------- 6 · Movimiento (los de la landing, sin más) --------------------------------------------------------------------- */ :root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-io: cubic-bezier(0.65, 0, 0.35, 1); --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 150ms; --dur: 250ms; } /* --------------------------------------------------------------------- 7 · @font-face (autoalojadas — se MOVIDIERON aquí desde apps/web/static/web/css/fonts.css en la #26; los woff2 siguen físicamente en apps/web/static/web/fonts/) --------------------------------------------------------------------- */ /* ---------- Fraunces · itálica (variable 300..700) ---------- */ @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../web/fonts/fraunces-italic-latin-ext.38175383d878.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 300 700; font-display: swap; src: url("../web/fonts/fraunces-italic-latin.7c1d820d2597.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Fraunces · normal (variable 300..700) ---------- */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../web/fonts/fraunces-normal-latin-ext.8cbcebfaaf43.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../web/fonts/fraunces-normal-latin.9a1814381455.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Geist · normal (variable 300..700) ---------- */ @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../web/fonts/geist-latin-ext.4841e590e2a9.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap; src: url("../web/fonts/geist-latin.a147f99cd533.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- Geist Mono · 400 y 500 (mismo fichero variable) ---------- */ @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../web/fonts/geist-mono-latin-ext.693cf932fe6b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url("../web/fonts/geist-mono-latin.a15f9d568fb0.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../web/fonts/geist-mono-latin-ext.693cf932fe6b.woff2") format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url("../web/fonts/geist-mono-latin.a15f9d568fb0.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } }