/** * F2 — tokens primitivos --vh-admin-* (SSOT admin-tailwind-ssot). * Sin Frosted/fui-* en runtime. */ :root { /* Legacy alias only: typography authority lives in ReUI font-inter global context. */ --vh-admin-font-family: inherit; --vh-admin-font-size-1: 12px; --vh-admin-font-size-2: 14px; --vh-admin-font-size-3: 16px; --vh-admin-font-size-4: 18px; --vh-admin-line-height-1: 16px; --vh-admin-line-height-2: 20px; --vh-admin-line-height-3: 24px; --vh-admin-line-height-4: 26px; --vh-admin-font-weight-regular: 400; --vh-admin-font-weight-medium: 500; --vh-admin-font-weight-semibold: 600; --vh-admin-font-weight-bold: 700; /* Typography roles — semantic tokens (primitives → roles → catalog utilities) */ --vh-admin-type-body-size: var(--vh-admin-font-size-3); --vh-admin-type-body-line-height: var(--vh-admin-line-height-3); --vh-admin-type-body-weight: var(--vh-admin-font-weight-regular); --vh-admin-type-body-color: var(--vh-admin-color-text); --vh-admin-type-secondary-size: var(--vh-admin-font-size-2); --vh-admin-type-secondary-line-height: var(--vh-admin-line-height-2); --vh-admin-type-secondary-weight: var(--vh-admin-font-weight-regular); --vh-admin-type-secondary-color: var(--vh-admin-color-text-secondary); --vh-admin-type-caption-size: var(--vh-admin-font-size-1); --vh-admin-type-caption-line-height: var(--vh-admin-line-height-1); --vh-admin-type-caption-weight: var(--vh-admin-font-weight-regular); --vh-admin-type-caption-color: #00000066; --vh-admin-type-caption-muted-color: var(--vh-admin-color-text-muted); --vh-admin-type-lead-size: var(--vh-admin-font-size-3); --vh-admin-type-lead-line-height: var(--vh-admin-line-height-3); --vh-admin-type-lead-weight: var(--vh-admin-font-weight-regular); --vh-admin-type-lead-color: var(--vh-admin-color-text); --vh-admin-type-lead-opacity: 0.85; --vh-admin-type-section-title-size: var(--vh-admin-font-size-3); --vh-admin-type-section-title-line-height: var(--vh-admin-line-height-3); --vh-admin-type-section-title-weight: var(--vh-admin-font-weight-semibold); --vh-admin-type-section-title-color: var(--vh-admin-color-text); --vh-admin-type-page-title-size: var(--vh-admin-font-size-2); --vh-admin-type-page-title-line-height: var(--vh-admin-line-height-4); --vh-admin-type-page-title-weight: var(--vh-admin-font-weight-semibold); --vh-admin-type-page-title-color: var(--vh-admin-color-text); /* Nav tab label (hub + perfil): un solo punto de cambio tipográfico */ --vh-admin-type-nav-tab-size: var(--vh-admin-font-size-2); --vh-admin-type-nav-tab-line-height: var(--vh-admin-line-height-2); --vh-admin-type-nav-tab-weight: var(--vh-admin-font-weight-medium); /* Título de acordeón + fila categoría (configurador + vh-admin-accordion): size-3 único */ --vh-admin-type-accordion-title-size: var(--vh-admin-font-size-3); --vh-admin-type-accordion-title-line-height: var(--vh-admin-line-height-3); --vh-admin-type-accordion-title-weight: var(--vh-admin-font-weight-semibold); --vh-admin-type-accordion-title-color: var(--vh-admin-color-text); --vh-admin-space-1: 4px; --vh-admin-space-2: 8px; --vh-admin-space-3: 12px; --vh-admin-space-4: 16px; --vh-admin-space-5: 24px; --vh-admin-space-6: 32px; --vh-admin-space-7: 40px; --vh-admin-space-8: 48px; --vh-admin-space-9: 64px; /* Control heights — semantic sizing, independent from spacing scale. */ --vh-admin-control-size-1: 24px; --vh-admin-control-size-2: 32px; --vh-admin-control-size-3: 40px; --vh-admin-control-size-4: 48px; --vh-admin-radius-1: 3px; --vh-admin-radius-2: 4px; --vh-admin-radius-3: 6px; --vh-admin-radius-4: 8px; --vh-admin-radius-5: 12px; --vh-admin-radius-6: 16px; --vh-admin-radius-full: 9999px; --vh-admin-color-bg: #ffffff; --vh-admin-color-panel: #ffffff; --vh-admin-color-panel-translucent: #ffffffd9; --vh-admin-color-surface: #ffffffe6; --vh-admin-color-surface-muted: #eef0f4; --vh-admin-color-text: #202020; --vh-admin-color-text-strong: #24292e; --vh-admin-color-text-secondary: #0000009b; --vh-admin-color-text-muted: #0000007c; --vh-admin-color-border: #0000002a; --vh-admin-color-border-subtle: #00000014; --vh-admin-color-hover-subtle: #eef0f4; --vh-admin-color-active-subtle: #e0e0e0; --vh-admin-color-hover-nav: #e8e8e8; --vh-admin-color-disabled-text: #0004; --vh-admin-color-disabled-bg: #0000000f; --vh-admin-color-primary: #000000; --vh-admin-color-primary-hover: #202020; --vh-admin-color-primary-contrast: #ffffff; --vh-admin-color-on-solid: #ffffff; --vh-admin-color-primary-soft: #00000014; --vh-admin-color-primary-soft-hover: #00000022; --vh-admin-color-primary-text: #000000; --vh-admin-color-primary-soft-text: #202020; --vh-admin-color-focus: #000000; --vh-admin-color-danger: #dd0200; --vh-admin-color-danger-hover: #e00; --vh-admin-color-danger-contrast: #ffffff; --vh-admin-color-danger-soft: #ff290019; --vh-admin-color-danger-soft-text: #e30000; --vh-admin-color-success: #30a46c; --vh-admin-color-success-soft: #00a43319; --vh-admin-color-success-soft-text: #00713fde; --vh-admin-color-warning: #ffc53d; --vh-admin-color-warning-soft: #ffde003d; --vh-admin-color-warning-soft-text: #ab6400; --vh-admin-shadow-sm: 0 1px 2px #0000000d; --vh-admin-shadow-card: none; --vh-admin-shadow-menu: 0 0 0 1px var(--vh-admin-color-border), 0 12px 60px #00000026, 0 12px 32px -16px var(--vh-admin-color-border); --vh-admin-shadow-modal: 0 0 0 1px var(--vh-admin-color-border-subtle), 0 12px 60px #00000026, 0 16px 64px #0000000f, 0 16px 36px -20px var(--vh-admin-color-border); --vh-admin-header-height: 60px; --vh-admin-chrome-bleed: 15px; --vh-admin-color-canvas: #f5f5f5; --vh-admin-dropdown-panel-min-width: 275px; /* G-F3: stacking shell usa escala F2 (header 50); legacy 9999 retirado del runtime shell */ --vh-admin-z-drawer-sidebar: 10001; /* La barra queda sobre drawers y bajo cualquier diálogo modal. */ --vh-admin-z-unsaved-bar: 10065; --vh-admin-z-modal: 10070; /* Popovers portaled deben poder abrir dentro de Dialog/AlertDialog. */ --vh-admin-z-dropdown-panel: 10080; --vh-admin-z-shell-overlay: 1045; --vh-admin-z-shell-panel: 1050; --vh-admin-color-scrim: rgba(0, 0, 0, 0.45); --vh-admin-color-upload-overlay: rgba(255, 255, 255, 0.88); --vh-admin-sidebar-width-collapsed: 64px; --vh-admin-sidebar-width-expanded: 280px; --vh-admin-configurator-content-max-width: 900px; --vh-admin-right-sidebar-width: 400px; /* Ancho mínimo del right sidebar al final del tramo fluido 1570→1450 */ --vh-admin-right-sidebar-width-min: 280px; --vh-admin-right-sidebar-header-height: 56px; --vh-admin-header-search-max: 280px; --vh-admin-z-shell-sidebar: 1; --vh-admin-z-shell-sidebar-hover: 2; --vh-admin-z-shell-header: 50; --vh-admin-pane-gap: 10px; --vh-admin-pane-radius: 16px; --vh-admin-content-padding: 1.25rem; --vh-admin-breadcrumb-item-color: #003fc6fa; --vh-admin-breadcrumb-current-color: #001a50e9; --vh-admin-breadcrumb-separator-color: #0052ec81; }