/* ============================================================================= wisp-crm · design-tokens.css (ARRANQUE / única fuente de verdad) ----------------------------------------------------------------------------- Implementa docs/DISENO-GUIA.md. Reglas: - Los componentes usan SIEMPRE el token semántico (var(--color-*)), NUNCA un hex. - La MARCA es por tenant (white-label): cada WISP sobrescribe SOLO el bloque "BRAND (override por tenant)". El resto es fijo y compartido. - Hex de marca = DEFAULT NEUTRO del producto, NO de STARTECH. Cuando se scaffoldee apps/web, este archivo se vuelve el globals.css del panel. ============================================================================= */ /* Fuentes (3 roles). En producción, preferible cargarlas desde el del app. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap"); :root { /* --------------------------------------------------------------------------- 1) PRIMITIVOS (escala cruda — NO usar directo en componentes) --------------------------------------------------------------------------- */ --blue-50:#eef4fd; --blue-100:#d6e4fb; --blue-200:#aecbf6; --blue-300:#7ba8ef; --blue-400:#4a83e6; --blue-500:#1453b8; --blue-600:#0f3f92; --blue-700:#0c3375; --blue-800:#0a2a60; --blue-900:#071d44; --slate-50:#f7f9fb; --slate-100:#eef2f6; --slate-200:#e2e8f0; --slate-300:#cbd5e1; --slate-400:#94a3b8; --slate-500:#64748b; --slate-600:#475569; --slate-700:#334155; --slate-800:#1e293b; --slate-900:#0f1a2a; --slate-950:#0a1018; --cyan-400:#22d3ee; --cyan-500:#00b8d4; --cyan-600:#0e98b0; /* Estados: texto AA-validado (≥4.5 sobre su -bg y sobre blanco). El -500 es el texto en LIGHT (oscuro); el -500-dk es el texto en DARK (claro). Los -bg no cambian. */ --green-500:#157a45; --green-500-dk:#4ade80; --green-bg:#e7f6ee; --amber-500:#8a5300; --amber-500-dk:#fbbf24; --amber-bg:#fdf2e0; --red-500:#b42318; --red-500-dk:#fca5a5; --red-bg:#fdeceb; --info-500:#1d4ed8; --info-500-dk:#93b4fb; --info-bg:#e8effb; /* --------------------------------------------------------------------------- 2) BRAND — override por TENANT (white-label). Lo único que el cliente cambia. (default neutro del producto; cada WISP pone SU color/logo) --------------------------------------------------------------------------- */ --brand-primary: var(--blue-500); /* color dominante del tenant */ --brand-primary-hover: var(--blue-600); --brand-primary-active: #0c3a85; --brand-on-primary: #ffffff; /* texto sobre el primario (validar AA) */ --brand-accent: var(--cyan-500); /* acento nítido CTA/foco — NO otro azul */ --brand-accent-hover: #00a3bd; /* --brand-logo-url: url("..."); (lo inyecta la config del tenant) */ /* --------------------------------------------------------------------------- 3) SEMÁNTICOS — LIGHT (por defecto: oficina/cajero). Usar SIEMPRE estos. --------------------------------------------------------------------------- */ --color-bg: var(--slate-50); --color-surface: #ffffff; --color-surface-2: var(--slate-100); /* zebra de tablas, fondos sutiles */ --color-border: var(--slate-200); --color-border-strong: var(--slate-300); --color-text: var(--slate-900); --color-text-muted: var(--slate-500); --color-text-faint: var(--slate-400); --color-primary: var(--brand-primary); --color-primary-hover: var(--brand-primary-hover); --color-on-primary: var(--brand-on-primary); --color-accent: var(--brand-accent); --color-focus-ring: var(--brand-accent); /* Estados de RED/ISP (SIEMPRE con icono+texto, no solo color) */ --state-success:var(--green-500); --state-success-bg:var(--green-bg); /* online / al día / OK */ --state-warning:var(--amber-500); --state-warning-bg:var(--amber-bg); /* señal marginal / por vencer */ --state-danger:var(--red-500); --state-danger-bg:var(--red-bg); /* offline / corte / vencido / LOS */ --state-info:var(--info-500); --state-info-bg:var(--info-bg); /* en proceso / informativo */ /* --------------------------------------------------------------------------- 4) TIPOGRAFÍA (3 roles) --------------------------------------------------------------------------- */ --font-display:"IBM Plex Sans","DM Sans",system-ui,sans-serif; /* cabeceras */ --font-body:"IBM Plex Sans","DM Sans",system-ui,sans-serif; /* texto/UI */ --font-mono:"IBM Plex Mono","JetBrains Mono",ui-monospace,monospace; /* DATOS: dBm/IP/MAC/NCF/RD$ */ --fs-32:2rem; --fs-24:1.5rem; --fs-20:1.25rem; --fs-16:1rem; --fs-14:0.875rem; --fs-13:0.8125rem; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --lh-tight:1.15; --lh-normal:1.5; /* --------------------------------------------------------------------------- 5) ESPACIADO (base 4px) · RADIOS · SOMBRAS (elevación) · MOTION --------------------------------------------------------------------------- */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --radius-sm:4px; /* botones / inputs */ --radius-md:8px; /* cards */ --radius-none:0px; /* paneles / tablas */ /* SIN pills salvo badges de estado: */ --radius-badge:999px; --shadow-1:0 1px 2px rgba(15,26,42,.06), 0 1px 3px rgba(15,26,42,.05); /* card */ --shadow-2:0 4px 12px rgba(15,26,42,.10); /* menú/popover */ --shadow-3:0 12px 32px rgba(15,26,42,.18); /* modal */ --dur-fast:150ms; --dur-base:200ms; --dur-slow:300ms; --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in-out:cubic-bezier(.4,0,.2,1); } /* --------------------------------------------------------------------------- DARK — overrides del MISMO token semántico (NOC nocturno / técnico). Activar con . Los componentes no cambian. --------------------------------------------------------------------------- */ [data-theme="dark"] { --color-bg: #0d1521; --color-surface: #15202e; --color-surface-2: #1b2838; --color-border: #243447; --color-border-strong: #324863; --color-text: #dce8f7; --color-text-muted: #8499b5; --color-text-faint: #54688a; --brand-on-primary: #ffffff; /* Texto de estado en DARK = variante clara (AA ≥4.5 sobre los -bg oscuros de abajo) */ --state-success:var(--green-500-dk); --state-warning:var(--amber-500-dk); --state-danger:var(--red-500-dk); --state-info:var(--info-500-dk); --state-success-bg:#11271c; --state-warning-bg:#2a1f0a; --state-danger-bg:#2a1311; --state-info-bg:#0f1d3a; --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 4px 12px rgba(0,0,0,.5); --shadow-3:0 12px 32px rgba(0,0,0,.6); } /* --------------------------------------------------------------------------- Utilidades base --------------------------------------------------------------------------- */ body{ background:var(--color-bg); color:var(--color-text); font-family:var(--font-body); font-size:var(--fs-16); line-height:var(--lh-normal); -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:var(--fw-semibold); line-height:var(--lh-tight); } /* DATOS numéricos: mono + cifras tabulares (montos, dBm, IP, Mbps, NCF) */ .data, .num, td.num, .tabular{ font-family:var(--font-mono); font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums; } td.num, .num.right{ text-align:right; } /* montos/dBm a la derecha; texto a la izquierda */ :focus-visible{ outline:2px solid var(--color-focus-ring); outline-offset:2px; } /* Chips de estado (texto+color; añadir icono en el componente) */ .badge{ display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:var(--radius-badge); font-size:var(--fs-13); font-weight:var(--fw-medium); } .badge--success{ color:var(--state-success); background:var(--state-success-bg); } .badge--warning{ color:var(--state-warning); background:var(--state-warning-bg); } .badge--danger{ color:var(--state-danger); background:var(--state-danger-bg); } .badge--info{ color:var(--state-info); background:var(--state-info-bg); } /* ============================================================================= NOTA white-label: para un tenant, sobrescribir SOLO el bloque BRAND, p.ej.: :root[data-tenant="acme"]{ --brand-primary:#0b6; --brand-accent:#f60; } y su logo vía --brand-logo-url / config. NADA más se toca → consistencia. ============================================================================= */