/* ========================================================================== BestByte · SISTEMA — Design tokens (portal del cliente + panel admin) -------------------------------------------------------------------------- Estilo "software profesional" (ref. Stripe, Linear, Vercel, Shopify Admin): sobrio, claro por defecto, sin neón ni brillos. Independiente de los tokens de la tienda (assets/css/tokens.css): aquí NO se usa Chakra Petch. Tema: (lo fija el script inline del antes de pintar: localStorage 'bbapp-theme' → o prefers-color-scheme). Marca (logo oficial): azul "b" #0187FE · azul profundo #0050D0/#0068E0 · azul marino circuitos #1B3FA0 · plata #E8E7EA. El azul es SOLO para acciones primarias, selección, foco y enlaces. El índigo #4A4DFF solo etiqueta "servicios/proyectos" (BestByte Studio). Regla: ninguna pantalla usa colores a mano → siempre var(--token). Contrastes medidos (WCAG 2.1): ver comentarios "n:1". ========================================================================== */ :root, :root[data-theme="light"] { color-scheme: light; /* ---------- Superficies ---------- */ --c-bg: #f6f7f9; /* fondo del área de trabajo */ --c-bg-subtle: #f1f3f6; /* cabecera de tabla, hover de filas, pistas */ --c-surface: #ffffff; /* tarjetas, sidebar, modales */ --c-surface-2: #fafbfc; /* superficie anidada (bloque dentro de tarjeta) */ --c-surface-raised:#ffffff; /* menús, popovers, toasts */ --c-sidebar: #ffffff; --c-topbar: rgba(246, 247, 249, .86); --c-input: #ffffff; --c-input-disabled:#f1f3f6; --c-overlay: rgba(16, 24, 40, .45); /* fondo de modales / cajón */ /* ---------- Bordes ---------- */ --c-border: #e4e7ec; --c-border-strong: #d0d5dd; /* inputs, botones secondary */ --c-divider: #eaecf0; /* ---------- Texto ---------- */ --c-text: #101828; /* 17.7:1 sobre blanco */ --c-text-2: #475467; /* 7.6:1 */ --c-text-3: #636c81; /* 5.3:1 sobre blanco · 4.9:1 sobre --c-bg · 4.7:1 sobre --c-bg-subtle (cabeceras de tabla): AA */ --c-text-disabled: #98a2b3; --c-text-inverse: #ffffff; /* ---------- Marca / acción (azul BestByte) ---------- */ --c-primary: #0068e0; /* fondo de botón primario · blanco encima 5.2:1 */ --c-primary-hover: #0050d0; /* 6.9:1 */ --c-primary-active: #0045b5; --c-primary-ink: #ffffff; --c-link: #005ccc; /* enlaces / texto azul · 6.2:1 */ --c-link-hover: #0045b5; --c-primary-soft: #eaf3ff; /* selección, item activo de la sidebar */ --c-primary-soft-2: #d7e8ff; --c-primary-text: #0050d0; /* texto sobre --c-primary-soft · 6.3:1 */ --c-primary-line: #a9cdfd; --c-focus: #0187fe; /* anillo de foco (UI no textual 3.6:1) */ --c-focus-ring: rgba(1, 135, 254, .22); /* ---------- Índigo (servicios / proyectos · BestByte Studio) ---------- */ --c-indigo: #4a4dff; --c-indigo-soft: #eeeeff; --c-indigo-text: #3538d6; /* 6.9:1 sobre soft */ --c-indigo-line: #c7c8ff; /* ---------- Estados (fondo suave + texto oscuro) ---------- */ --c-success-bg: #ecfdf3; --c-success-text: #067647; --c-success-line: #abefc6; --c-success: #17b26a; --c-warning-bg: #fffaeb; --c-warning-text: #b54708; --c-warning-line: #fedf89; --c-warning: #f79009; --c-danger-bg: #fef3f2; --c-danger-text: #b42318; --c-danger-line: #fecdca; --c-danger: #f04438; --c-info-bg: #eff8ff; --c-info-text: #175cd3; --c-info-line: #b2ddff; --c-info: #2e90fa; --c-neutral-bg: #f2f4f7; --c-neutral-text: #344054; --c-neutral-line: #e4e7ec; --c-neutral: #98a2b3; --c-danger-fill: #d92d20; /* botón peligro · blanco encima 4.8:1 */ --c-danger-fill-hover: #b42318; /* ---------- Gráficos ---------- */ --c-chart-1: #0068e0; /* serie principal (5.2:1 vs superficie) */ --c-chart-1-soft: rgba(0, 104, 224, .10); --c-chart-muted: #b8c0cc; /* serie desenfatizada / sparkline */ --c-chart-grid: #eaecf0; --c-chart-hover: #0050d0; /* ---------- Avatares (pares fondo/texto, AA) ---------- */ --c-av-1-bg: #e0ecff; --c-av-1-fg: #1849a9; --c-av-2-bg: #fce7f6; --c-av-2-fg: #9e165f; --c-av-3-bg: #dcfae6; --c-av-3-fg: #085d3a; --c-av-4-bg: #fef0c7; --c-av-4-fg: #93370d; --c-av-5-bg: #ebe9fe; --c-av-5-fg: #4a1fb8; --c-av-6-bg: #d5f5f6; --c-av-6-fg: #0e5a66; /* ---------- Logo (variante clara: letras grafito/marino + bolsa con contorno) ---------- */ --logo-word: linear-gradient(180deg, #2b3756 0%, #141c30 100%); --logo-word-shadow: none; --logo-bag-1: #fbfbfd; --logo-bag-2: #e6e9ef; --logo-bag-3: #c9ced8; --logo-bag-line: #a3abbb; --logo-handle-1: #b4bccb; --logo-handle-2: #8f99ac; /* ---------- Esqueletos ---------- */ --c-skeleton: #eceef2; --c-skeleton-2: #f6f7f9; /* ---------- Sombras (suaves) ---------- */ --sh-xs: 0 1px 2px rgba(16, 24, 40, .05); --sh-sm: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --sh-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 2px 4px -2px rgba(16, 24, 40, .04); --sh-lg: 0 12px 16px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03); --sh-xl: 0 20px 24px -4px rgba(16, 24, 40, .10), 0 8px 8px -4px rgba(16, 24, 40, .04); --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .12); } /* ---------- Tema oscuro sobrio (gris azulado, no negro gamer) ---------- */ :root[data-theme="dark"] { color-scheme: dark; --c-bg: #0f141d; --c-bg-subtle: #141a25; --c-surface: #151b26; --c-surface-2: #121823; --c-surface-raised:#1b2230; --c-sidebar: #0c1119; --c-topbar: rgba(15, 20, 29, .86); --c-input: #111722; --c-input-disabled:#161c27; --c-overlay: rgba(3, 6, 12, .66); --c-border: #252d3b; --c-border-strong: #323c4e; --c-divider: #1f2632; --c-text: #e6e9ef; /* 14.8:1 sobre --c-surface */ --c-text-2: #a7b0c0; /* 8:1 */ --c-text-3: #8490a5; /* 5.4:1 */ --c-text-disabled: #5b6679; --c-text-inverse: #0f141d; --c-primary: #0068e0; /* blanco encima 5.2:1 */ --c-primary-hover: #0a5cd0; --c-primary-active: #0050b8; --c-primary-ink: #ffffff; --c-link: #5aabff; /* 7:1 sobre --c-surface */ --c-link-hover: #8cc4ff; --c-primary-soft: rgba(1, 135, 254, .14); --c-primary-soft-2: rgba(1, 135, 254, .22); --c-primary-text: #8cc4ff; /* 8.4:1 */ --c-primary-line: rgba(1, 135, 254, .45); --c-focus: #4da3ff; --c-focus-ring: rgba(77, 163, 255, .28); --c-indigo: #6e72ff; --c-indigo-soft: rgba(110, 114, 255, .16); --c-indigo-text: #b3b7ff; --c-indigo-line: rgba(110, 114, 255, .42); --c-success-bg: rgba(23, 178, 106, .14); --c-success-text: #6ce9a6; --c-success-line: rgba(23, 178, 106, .34); --c-success: #32d583; --c-warning-bg: rgba(247, 144, 9, .14); --c-warning-text: #fdb022; --c-warning-line: rgba(247, 144, 9, .34); --c-warning: #fdb022; --c-danger-bg: rgba(240, 68, 56, .15); --c-danger-text: #fda29b; --c-danger-line: rgba(240, 68, 56, .38); --c-danger: #f97066; --c-info-bg: rgba(46, 144, 250, .15); --c-info-text: #84caff; --c-info-line: rgba(46, 144, 250, .38); --c-info: #53b1fd; --c-neutral-bg: rgba(152, 162, 179, .14);--c-neutral-text: #cfd4dc; --c-neutral-line: rgba(152, 162, 179, .28);--c-neutral: #7d889b; --c-danger-fill: #d92d20; --c-danger-fill-hover: #b42318; --c-chart-1: #3b8eff; --c-chart-1-soft: rgba(59, 142, 255, .14); --c-chart-muted: #4a5569; --c-chart-grid: #222a37; --c-chart-hover: #7ab4ff; --c-av-1-bg: rgba(59, 130, 246, .2); --c-av-1-fg: #9cc3ff; --c-av-2-bg: rgba(236, 72, 153, .18); --c-av-2-fg: #f6a8d4; --c-av-3-bg: rgba(23, 178, 106, .18); --c-av-3-fg: #7ee2ad; --c-av-4-bg: rgba(247, 144, 9, .18); --c-av-4-fg: #fcc56b; --c-av-5-bg: rgba(122, 90, 248, .2); --c-av-5-fg: #c4b5fd; --c-av-6-bg: rgba(6, 174, 212, .18); --c-av-6-fg: #7cd4e6; /* Logo en oscuro: la versión plateada oficial */ --logo-word: linear-gradient(180deg, #ffffff 0%, #e8e7ea 55%, #c3c7d1 100%); --logo-word-shadow: drop-shadow(0 1px 0 rgba(0, 0, 0, .35)); --logo-bag-1: #ffffff; --logo-bag-2: #e8e7ea; --logo-bag-3: #c3c7d1; --logo-bag-line: transparent; --logo-handle-1: #ffffff; --logo-handle-2: #cfd2da; --c-skeleton: #1c2331; --c-skeleton-2: #232b3a; --sh-xs: 0 1px 2px rgba(0, 0, 0, .3); --sh-sm: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .2); --sh-md: 0 4px 10px -2px rgba(0, 0, 0, .4), 0 2px 4px -2px rgba(0, 0, 0, .25); --sh-lg: 0 12px 20px -4px rgba(0, 0, 0, .45), 0 4px 8px -2px rgba(0, 0, 0, .25); --sh-xl: 0 24px 32px -6px rgba(0, 0, 0, .55), 0 8px 12px -4px rgba(0, 0, 0, .3); --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .06); } /* Sin JS: respetar el sistema operativo */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } /* ---------- Tokens que no cambian con el tema ---------- */ :root { /* Tipografía: Inter para todo (texto, títulos y números) */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", monospace; --font-logo: "Montserrat", "Segoe UI", system-ui, sans-serif; /* SOLO el wordmark (900 itálica) */ --fs-2xs: .6875rem; /* 11 · micro etiquetas, ejes */ --fs-xs: .75rem; /* 12 · metadatos, badges */ --fs-sm: .8125rem; /* 13 · texto secundario, tablas densas */ --fs-base:.875rem; /* 14 · texto base del sistema */ --fs-md: .9375rem; /* 15 · títulos de tarjeta */ --fs-lg: 1.125rem; /* 18 · títulos de sección / modal */ --fs-xl: 1.375rem; /* 22 · título de página (móvil) */ --fs-2xl: 1.625rem; /* 26 · título de página */ --fs-kpi: 1.625rem; /* 26 · valor de KPI */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --lh-tight: 1.2; --lh-snug: 1.35; --lh-base: 1.5; --tracking-tight: -.011em; --tracking-title: -.018em; --tracking-caps: .04em; /* Espaciado (base 4 px) */ --sp-0: 0; --sp-1: .25rem; /* 4 */ --sp-2: .5rem; /* 8 */ --sp-3: .75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-7: 2rem; /* 32 */ --sp-8: 2.5rem; /* 40 */ --sp-9: 3rem; /* 48 */ --sp-10: 4rem; /* 64 */ /* Radios (8–10 px por defecto) */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; /* botones, inputs */ --r-lg: 10px; /* tarjetas */ --r-xl: 12px; /* modales */ --r-full: 999px; /* Controles */ --control-h-sm: 30px; --control-h: 36px; --control-h-lg: 42px; /* Layout */ --sidebar-w: 264px; --sidebar-w-collapsed: 64px; --topbar-h: 56px; --content-max: 1320px; --content-narrow: 880px; --gutter: 32px; /* Capas */ --z-base: 1; --z-sticky: 20; --z-sidebar: 30; --z-topbar: 40; --z-dropdown: 50; --z-drawer: 60; --z-modal: 70; --z-toast: 80; --z-tooltip: 90; /* Movimiento */ --ease: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.4, 0, .2, 1); --dur-fast: 120ms; --dur: 180ms; --dur-slow: 260ms; } @media (max-width: 1023.98px) { :root { --gutter: 24px; } } @media (max-width: 639.98px) { :root { --gutter: 16px; } } /* Objetivos táctiles de 44 px en el celular (contrato de diseño §5.4; plano erp-01 D30, T5.5): botones, inputs y selects del sistema miden 44 px de alto en pantallas angostas. */ @media (max-width: 767.98px) { :root { --control-h: 44px; --control-h-sm: 44px; } } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } }