/* ============================================================ Hednora UI Framework (HUF) — Design Tokens ------------------------------------------------------------ Capa 1 de HUF. Tokens estructurales *brand-neutral*: espaciado, tipografía, geometría, elevación, movimiento, z-index y breakpoints. Ningún color de identidad ni de vertical de negocio vive aquí — la identidad (Neo Industrial) vive en themes/neo-industrial.css y el acento de cada vertical en su propio themes/*-accent.css (HVL §5.3, §6: los tokens no conocen componentes ni productos, y la identidad no se acopla a ninguna superficie concreta). Nomenclatura de esta capa: nombrada por INTENCIÓN, nunca por categoría de componente. Si dos categorías de componente podrían razonablemente compartir un valor, el nombre describe la escala (--hd-radius-sm/-md); si el valor es una restricción funcional específica de un rol (la altura de un control no converge con la de una fila de tabla por casualidad), el nombre describe el rol (--hd-size-control/-row). Los componentes conocen tokens; los tokens no conocen componentes. ============================================================ */ :root { /* ── Espaciado — base 4px (HVL §5.1) ──────────────────────── */ --hd-space-1: 0.25rem; /* 4px */ --hd-space-2: 0.5rem; /* 8px */ --hd-space-3: 0.75rem; /* 12px */ --hd-space-4: 1rem; /* 16px */ --hd-space-5: 1.5rem; /* 24px */ --hd-space-6: 2rem; /* 32px */ --hd-space-7: 2.5rem; /* 40px */ --hd-space-8: 3rem; /* 48px */ /* ── Tipografía (HVL §5.4) ───────────────────────────────── DECISIÓN OFICIAL: Satoshi, autohospedada. Inter/Manrope descartadas — no se vuelven a evaluar salvo rebranding completo. */ --hd-font-sans: 'Satoshi', 'Segoe UI', system-ui, -apple-system, sans-serif; --hd-font-heading: var(--hd-font-sans); /* Valores que se leen carácter a carácter y se comparan contra otra pantalla: IPs, llaves de API, slugs, secretos. Es un rol tipográfico del sistema, no un capricho de una vista — por eso es token y no un style="font-family:monospace" repetido por pantalla. */ --hd-font-mono: ui-monospace, 'Cascadia Mono', 'SF Mono', Consolas, monospace; /* Escala por ROL editorial (HVL §5.4/§13) — un tamaño de texto es distinto por rol por diseño, no por casualidad, así que nombrarlo por rol no lo acopla a ningún componente de UI concreto. */ --hd-text-micro: 0.6875rem; /* 11px — micro-etiqueta técnica: campo, th, indicador, grupo de sidebar */ --hd-text-meta: 0.75rem; /* 12px — meta / badge */ /* HVL §13 no nombra un token para 13px, pero su propia prosa lo exige dos veces (§6.5 subtítulo de panel, §6.9 texto de toast) — se añade aquí para no dejar un valor literal sin token (HVL §9 prueba 4). Pendiente: incorporar formalmente a HVL §13 en una próxima revisión. */ --hd-text-caption: 0.8125rem; /* 13px — subtítulo de panel/modal, texto de toast */ --hd-text-base: 0.9375rem; /* 15px — cuerpo / control */ --hd-text-title: 1.0625rem; /* 17px — título de panel / modal */ --hd-text-section: 1.25rem; /* 20px — encabezado de sección */ --hd-text-page: 1.5rem; /* 24px — título de página */ --hd-text-indicator: 2.5rem; /* 40px — indicador */ --hd-text-indicator-hero: 3.5rem; /* 56px — indicador dominante (solo si dispara una acción, HVL §7.2) */ /* ── Geometría — solo tres radios en todo el producto (HVL §5.1) ── */ --hd-radius-sm: 8px; /* control: botón, input, select, sidebar item, tooltip, celda interactiva, chip */ --hd-radius-md: 12px; /* panel: card, widget, modal, toast, dropdown, estado vacío */ --hd-radius-pill: 999px; /* solo badges de estado y avatares */ /* Alturas de control unificadas (HVL §5.1) */ --hd-size-control: 44px; --hd-size-control-sm: 36px; --hd-size-control-lg: 52px; /* Dimensiones fijas por rol — restricción funcional real, no una escala compartible entre categorías de componente */ --hd-size-row: 52px; /* fila de tabla — densidad normal */ --hd-size-row-compact: 44px; /* densidad compacta (HVL §6.7) */ --hd-size-row-wide: 64px; /* densidad amplia (HVL §6.7) */ --hd-size-header: 44px; /* encabezado de tabla */ --hd-size-topbar: 48px; /* línea de estado superior */ --hd-size-toolbar: 48px; /* barra de filtros + acciones (HVL §8.1 región C) */ --hd-size-footer: 56px; /* footer de acciones contextual (HVL §8.1 región E, §8.2) */ --hd-size-sidebar: 280px; /* sidebar expandido */ --hd-size-sidebar-collapsed: 72px; /* sidebar colapsado */ --hd-size-sidebar-rail: 8px; /* offset del riel técnico desde el borde izquierdo */ /* ── Elevación (HVL §5.2) — solo lo que flota sobre el plano lleva sombra; el resto expresa profundidad por valor de fondo, nunca por sombra. */ --hd-shadow-floating: 0 18px 40px rgba(0,0,0,.45); --hd-glow-accent: 0 6px 18px rgba(0,194,168,.28); /* ── Movimiento — una sola duración, una sola curva (HVL §5.6) ── */ --hd-motion-standard: 180ms; --hd-ease: cubic-bezier(0.2, 0, 0, 1); /* ── Foco (HVL §5.7) ───────────────────────────────────────── */ --hd-focus-ring: 2px solid var(--hd-theme-accent-text); --hd-focus-offset: 2px; /* ── Índices de apilamiento ────────────────────────────────── */ --hd-z-dropdown: 1200; /* Drawer del sidebar en móvil. Necesita su propio par —velo y panel— porque el orden entre ambos es la diferencia entre un menú usable y uno inerte: hasta 2026-08-06 el drawer reusaba --hd-z-modal-backdrop y su velo --hd-z-modal, así que el velo quedaba ENCIMA del menú y se comía todos los toques. Va por debajo de --hd-z-modal-backdrop a propósito: con un modal abierto, manda el modal. */ --hd-z-drawer-backdrop: 1250; --hd-z-drawer: 1260; --hd-z-modal-backdrop: 1300; --hd-z-modal: 1310; --hd-z-toast: 1400; --hd-z-tour: 1450; /* ── Breakpoints — valores de referencia ────────────────── Las custom properties no son válidas dentro de @media: estos son los valores que TODO archivo de css/huf/ debe usar como literales en sus @media. Mantener sincronizado a mano con wwwroot/js/huf/hd-breakpoints.js (mismo comentario en ese archivo). */ --hd-bp-sm: 576px; --hd-bp-md: 768px; --hd-bp-lg: 992px; --hd-bp-xl: 1200px; /* ── Color de estado — fijo en toda identidad (HVL §5.3) ──── A diferencia del acento de identidad o de vertical, el color de éxito/advertencia/error/información no varía nunca. */ --hd-color-success: #22C55E; --hd-color-warning: #F59E0B; --hd-color-error: #EF4444; --hd-color-info: #0095FF; } /* ── Superficie táctil — bajo 992px ───────────────────────────── El "control pequeño" deja de ser pequeño cuando el dedo es el puntero: pasa de 36 a 44px, el mayor de los dos mínimos táctiles del mercado (Android 48 / iOS 44) y el que la ley visual declara como mínimo en móvil. Va en el TOKEN y no en cada componente porque el valor vive aquí y lo leen cuatro: `.hd-btn--sm` (buttons.css), `.hd-table__expander` (tables.css), los controles de filtro (toolbar.css) y el buscador de la topbar. Repetir la consulta de medios cuatro veces habría dejado cuatro sitios donde olvidarse del quinto. Medido a 360px en 19 pantallas del AdminPortal: 409 objetivos por debajo de 44px, y la mayoría —56 botones de icono de 48×36 en las colas de pedidos, 28 en fichas, 22 expansores de 36×36— salían de este único token. El corte va en 992 y no en 768 por el mismo criterio que ADR-040 usó para el composer: 992 es donde el sidebar ya es un drawer y el layout está apilado, así que la superficie es táctil y sobra alto para gastar 8px por control. Una tablet en vertical se toca igual que un teléfono. No alcanza a los objetivos EN LÍNEA —enlaces dentro de un párrafo o de una celda, la ruta de contexto— que WCAG 2.5.8 exime a propósito: agrandarlos rompería el renglón que los contiene. */ @media (max-width: 991.98px) { :root { --hd-size-control-sm: 44px; } }