/** * tokens.css — fuente de verdad visual (Fase 0). * * Cargar PRIMERO en layout (antes de nav-sidebar / frean / pages). * Nuevos estilos: preferí --brand-* / --color-* / --radius-* / --space-*. * Compat: --frean-*, --ag-nav-* y --admin-brand-* son aliases (no borrar aún). * * Override runtime: layout inyecta accent/nav desde config/brand.php. * * | Token | Uso | * |-----------------------|------------------------------| * | --brand-accent | CTAs, links activos, focus | * | --brand-accent-dark | hover primary | * | --brand-accent-light | chips / fondos suaves | * | --brand-nav | fondo topbar + rail | * | --brand-theme | theme-color PWA / meta | * | --color-text | texto cuerpo | * | --color-muted | texto secundario | * | --color-surface | fondo página admin | * | --color-border | bordes sutiles | * | --radius-card | cards / paneles | * | --font-sans | tipografía UI | * | --font-weight-* | 400 regular / 500 / 600 / 700 | * | --space-1..4 | espaciado base (0.25–1rem) | */ :root { /* —— Canonical brand / color —— */ --brand-accent: #46ADED; --brand-accent-dark: #359cd9; --brand-accent-light: #e4f3fd; --brand-nav: #2c2f34; --brand-theme: #7d89b3; --brand-navy: #24445d; --color-text: #2c3e50; --color-muted: #95a5a6; --color-surface: #f8f9fa; --color-border: #e7edf3; --color-row-alt: #f8fbfd; --color-row-hover: #eef8fe; --radius-card: 16px; --shadow-card: 0 4px 15px rgba(0, 0, 0, 0.05); --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; /* —— Table density models (frean-table--*) —— */ --table-th-pad-list: 0.78rem 0.8rem; --table-td-pad-list: 0.72rem 0.8rem; --table-font-list: 0.91rem; --table-th-pad-lines: 0.62rem 0.7rem; --table-td-pad-lines: 0.58rem 0.7rem; --table-font-lines: 0.88rem; --table-th-pad-items: 0.55rem 0.55rem; --table-td-pad-items: 0.45rem 0.55rem; --table-font-items: 0.88rem; --table-head-bg: linear-gradient(180deg, #f5f9fc 0%, #edf4f8 100%); --table-head-border: #e2e8ef; /* —— Nav layout (estructura) —— */ --ag-nav-rail-width: 5.25rem; --ag-nav-expanded-width: 16.5rem; --ag-nav-current-width: 5.25rem; --ag-nav-header-height: 0px; --ag-nav-float-inset: 1.25rem; --ag-nav-transition: 0.35s ease; --ag-nav-bg-image: none; /* —— Nav colors (sidebar flotante claro) —— */ --ag-nav-active-color: #007aff; --ag-nav-active-bg: rgb(0 122 255 / 10%); --ag-nav-text: #3d434b; --ag-nav-text-muted: #6e747d; --ag-nav-surface: #ffffff; --ag-nav-overlay: transparent; --ag-nav-divider: #eef0f3; --ag-nav-flyout-bg: #ffffff; --ag-nav-chip: #f4f5f7; --ag-nav-shadow: 0 24px 60px rgb(31 41 55 / 12%); --ag-nav-page: #e8ecf1; /* —— Compat Frean (componentes existentes) —— */ --frean-accent: var(--brand-accent); --frean-accent-dark: var(--brand-accent-dark); --frean-accent-light: var(--brand-accent-light); --frean-text: var(--color-text); --frean-muted: var(--color-muted); --frean-surface: var(--color-surface); --frean-card-radius: var(--radius-card); --frean-card-shadow: var(--shadow-card); --frean-border: var(--color-border); --frean-row-alt: var(--color-row-alt); --frean-row-hover: var(--color-row-hover); --frean-navy: var(--brand-navy); /* —— Compat admin-dashboard (app-listado) —— */ --admin-brand-color: var(--brand-accent); --admin-brand-dark: var(--brand-accent-dark); --admin-brand-light: var(--brand-accent-light); } /* —— Tema oscuro (data-theme en ) —— */ html[data-theme="dark"] { color-scheme: dark; --brand-accent: #5eb8f0; --brand-accent-dark: #46aded; --brand-accent-light: #1a2f3d; --brand-navy: #d7e6f2; --color-text: #e8edf2; --color-muted: #9aa7b5; --color-surface: #12171d; --color-border: #2a3440; --color-row-alt: #161c23; --color-row-hover: #1c2530; --shadow-card: 0 8px 28px rgb(0 0 0 / 35%); --table-head-bg: linear-gradient(180deg, #1a222c 0%, #151b22 100%); --table-head-border: #2a3440; --ag-nav-active-color: #5eb8f0; --ag-nav-active-bg: rgb(94 184 240 / 14%); --ag-nav-text: #e8edf2; --ag-nav-text-muted: #9aa7b5; --ag-nav-surface: #1a222c; --ag-nav-divider: #2a3440; --ag-nav-flyout-bg: #1a222c; --ag-nav-chip: #242d38; --ag-nav-shadow: 0 24px 60px rgb(0 0 0 / 45%); --ag-nav-page: #0f1419; --frean-accent: var(--brand-accent); --frean-accent-dark: var(--brand-accent-dark); --frean-accent-light: var(--brand-accent-light); --frean-text: var(--color-text); --frean-muted: var(--color-muted); --frean-surface: var(--color-surface); --frean-border: var(--color-border); --frean-row-alt: var(--color-row-alt); --frean-row-hover: var(--color-row-hover); --frean-navy: var(--brand-navy); --frean-card-shadow: var(--shadow-card); }