/* ============================================================= Grafiks Design System — Tokens ------------------------------------------------------------- Sistema visual sobrio B2B, inspirado en patrones Verifactu y adaptado a dominio CAE (gestión documental PRL). Versión: 2.x (neutral-first, sage como acento de moderación) Cambia el modo claro/oscuro vía [data-theme="dark"] en cualquier ancestro (por defecto, ). ============================================================= */ :root, [data-theme="light"] { /* ---- Superficies: neutral-first -------------------------- */ --g-bg: #F8F9FB; /* fondo de la app (gris muy claro) */ --g-surface: #FFFFFF; /* cards, panels, formularios */ --g-surface-alt: #F3F4F6; /* cabeceras de tabla, filas alternas */ --g-overlay: rgba(17, 24, 39, 0.04); /* hover sutil sobre filas */ /* ---- Texto ------------------------------------------------- */ --g-fg: #111827; /* texto principal */ --g-fg-strong: #111827; /* igual a fg en este sistema plano */ --g-muted: #4B5563; /* texto secundario */ --g-muted-strong: #9CA3AF; /* labels muy pequeñas */ --g-fg-on-accent: #FFFFFF; /* ---- Bordes (más suaves, sin calidez) ---------------------- */ --g-line: #E5E7EB; /* separadores por defecto */ --g-line-strong: #D1D5DB; /* separadores de énfasis, focus */ /* ---- Acento sage — usar SOLO en CTA + estado activo + focus - */ --g-accent: #2E5C49; /* verde corporativo, USO CON CUIDADO */ --g-accent-hover: #234A3A; --g-accent-soft: #E0EAE5; /* fondo de chip activo / hover */ --g-accent-softer: rgba(46, 92, 73, 0.06); /* ---- Estados semánticos (alineados con badges de estado) -- */ --g-ok: #16A34A; --g-ok-bg: #DCFCE7; --g-warn: #B45309; --g-warn-bg: #FEF3C7; --g-bad: #B91C1C; --g-bad-bg: #FEE2E2; --g-neut-bg: #F3F4F6; /* ---- Sidebar claro (B2B, no oscuro) ----------------------- */ --g-sidebar-bg: #FFFFFF; --g-sidebar-fg: #4B5563; --g-sidebar-fg-strong: #111827; --g-sidebar-fg-hover: #111827; --g-sidebar-hover: #F3F4F6; --g-sidebar-active-bg: #F1F5F4; /* sage muy suave */ --g-sidebar-active-fg: #111827; --g-sidebar-active: #F1F5F4; /* alias retrocompatible */ --g-sidebar-line: #E5E7EB; --g-sidebar-border-r: 1px solid #E5E7EB; /* ---- Tipografía: single family ---------------------------- */ --g-display: "Manrope", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --g-sans: "Manrope", "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --g-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Escala tipográfica más densa, B2B (cuerpo 14px) ---------- */ --g-text-xs: 0.75rem; /* 12 — microcopy, table header */ --g-text-sm: 0.8125rem; /* 13 — labels, captions */ --g-text-base: 0.875rem; /* 14 — cuerpo, default */ --g-text-md: 0.9375rem; /* 15 — párrafo destacado */ --g-text-lg: 1rem; /* 16 — h3 */ --g-text-xl: 1.125rem; /* 18 — h2 dashboard */ --g-text-2xl: 1.375rem; /* 22 — h1 sección */ --g-text-3xl: 1.875rem; /* 30 — portada, hero */ /* ---- Espaciado (escala 4px) ------------------------------- */ --g-space-1: 0.25rem; /* 4 */ --g-space-2: 0.5rem; /* 8 */ --g-space-3: 0.75rem; /* 12 */ --g-space-4: 1rem; /* 16 */ --g-space-5: 1.25rem; /* 20 */ --g-space-6: 1.5rem; /* 24 */ --g-space-7: 2rem; /* 32 */ --g-space-8: 2.5rem; /* 40 */ --g-space-9: 3rem; /* 48 */ /* ---- Radios (suaves, sin destacar) ----------------------- */ --g-radius-sm: 4px; --g-radius-md: 6px; --g-radius-lg: 8px; --g-radius-xl: 10px; --g-radius-pill: 999px; /* ---- Sombras casi planas (Verifactu style) --------------- */ --g-shadow-1: 0 1px 2px rgba(17, 24, 39, 0.04); --g-shadow-2: 0 4px 12px rgba(17, 24, 39, 0.08); --g-shadow-3: 0 8px 24px rgba(17, 24, 39, 0.10); --g-shadow-pop: 0 8px 24px rgba(17, 24, 39, 0.10); /* ---- Otros / layout --------------------------------------- */ --g-sidebar-width: 192px; --g-sidebar-width-collapsed: 56px; --g-header-height: 56px; --g-content-max: 1280px; --g-ease: 0.15s ease; } /* ============================================================= Modo oscuro (sigue siendo neutral-first, sage un punto más claro) ------------------------------------------------------------- La sidebar también se vuelve oscura en dark mode (un solo panel oscuro a la izquierda sobre fondo casi negro). ============================================================= */ [data-theme="dark"] { --g-bg: #0F1115; --g-surface: #161A21; --g-surface-alt: #1B2029; --g-overlay: rgba(255, 255, 255, 0.04); --g-fg: #E5E7EB; --g-fg-strong: #F9FAFB; --g-muted: #9CA3AF; --g-muted-strong: #6B7280; --g-fg-on-accent: #FFFFFF; --g-line: #1F2530; --g-line-strong: #2A3140; --g-accent: #5E9C82; /* sage más claro para legibilidad */ --g-accent-hover: #79B59B; --g-accent-soft: rgba(94, 156, 130, 0.18); --g-accent-softer: rgba(94, 156, 130, 0.08); --g-ok: #4ADE80; --g-ok-bg: rgba(74, 222, 128, 0.14); --g-warn: #FBBF24; --g-warn-bg: rgba(251, 191, 36, 0.14); --g-bad: #F87171; --g-bad-bg: rgba(248, 113, 113, 0.14); --g-neut-bg: #1F2530; --g-sidebar-bg: #11151C; --g-sidebar-fg: #9CA3AF; --g-sidebar-fg-strong: #F9FAFB; --g-sidebar-fg-hover: #FFFFFF; --g-sidebar-hover: rgba(255, 255, 255, 0.05); --g-sidebar-active-bg: rgba(94, 156, 130, 0.18); --g-sidebar-active-fg: #F9FAFB; --g-sidebar-line: #1F2530; --g-sidebar-border-r: 1px solid #1F2530; --g-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --g-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.50); --g-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.70); } /* Si el usuario pide modo oscuro del sistema y no ha elegido nada, respetamos su preferencia. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --g-bg: #0F1115; --g-surface: #161A21; --g-surface-alt: #1B2029; --g-overlay: rgba(255, 255, 255, 0.04); --g-fg: #E5E7EB; --g-fg-strong: #F9FAFB; --g-muted: #9CA3AF; --g-muted-strong: #6B7280; --g-line: #1F2530; --g-line-strong: #2A3140; --g-accent: #5E9C82; --g-accent-hover: #79B59B; --g-accent-soft: rgba(94, 156, 130, 0.18); --g-accent-softer: rgba(94, 156, 130, 0.08); --g-ok: #4ADE80; --g-ok-bg: rgba(74, 222, 128, 0.14); --g-warn: #FBBF24; --g-warn-bg: rgba(251, 191, 36, 0.14); --g-bad: #F87171; --g-bad-bg: rgba(248, 113, 113, 0.14); --g-neut-bg: #1F2530; --g-sidebar-bg: #11151C; --g-sidebar-fg: #9CA3AF; --g-sidebar-fg-strong: #F9FAFB; --g-sidebar-fg-hover: #FFFFFF; --g-sidebar-hover: rgba(255, 255, 255, 0.05); --g-sidebar-active-bg: rgba(94, 156, 130, 0.18); --g-sidebar-active-fg: #F9FAFB; --g-sidebar-active: rgba(94, 156, 130, 0.18); /* alias retrocompatible */ --g-sidebar-line: #1F2530; --g-sidebar-border-r: 1px solid #1F2530; --g-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.40); --g-shadow-2: 0 4px 12px rgba(0, 0, 0, 0.50); --g-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.70); --g-shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.70); } } /* ============================================================= LEGACY — Fraunces cálido, sin uso ------------------------------------------------------------- Bloque conservado para reversibilidad. NO se usa en el stylesheet de componentes. Se puede borrar cuando se decida que el sistema sobrio es definitivo. ============================================================= */ /* :root { --g-bg-legacy: #f6f4ee; --g-surface-legacy: #fffdf9; --g-accent-legacy: #2e5c49; --g-sidebar-bg-legacy: #1b1f1a; --g-display-legacy: "Manrope", system-ui, sans-serif; --g-sans-legacy: "Instrument Sans", system-ui, sans-serif; --g-text-xl-legacy: 1.85rem; --g-radius-lg-legacy: 10px; --g-shadow-2-legacy: 0 2px 8px rgba(26, 26, 46, 0.06); } */