/* ════════════════════════════════════════════════════════════════════════════ Design Tokens — Gestión Integraciones (Fase A rediseño UI) ──────────────────────────────────────────────────────────────────────────── Paleta inspirada en shadcn-ui / Tailwind slate+blue. Prefijo --gi-* para no colisionar con los tokens legacy --brand-* (rojo) que siguen vivos en app.css y otros componentes hasta que se vayan migrando uno a uno. ── Dark mode ────────────────────────────────────────────────────────────── El tema lo decide el atributo `data-theme` en (lo setea App.razor en SSR desde la preferencia guardada en profiles.theme / cookie gi-theme). Por defecto (sin atributo o data-theme="light") rige el bloque :root de abajo. Con data-theme="dark" se aplican los overrides del bloque dark al final. Todo color de la app debería referenciar un token --gi-* para que invierta automáticamente. Ver el bloque dark para el mapeo light→dark de cada uno. ════════════════════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ─── Surfaces (modo light) ─────────────────────────────────────────── */ --gi-bg: #f8fafc; /* slate-50 — fondo de toda la app */ --gi-fg: #1e293b; /* slate-800 — texto principal */ --gi-fg-strong: #0f172a; /* slate-900 — títulos / texto fuerte */ --gi-body: #475569; /* slate-600 — texto cuerpo / secundario */ --gi-card: #ffffff; --gi-card-fg: #1e293b; --gi-card-elevated: #ffffff; /* popover / superficie elevada */ --gi-popover: #ffffff; --gi-popover-fg: #1e293b; /* ─── Primary (acción / links) — Naranja brand Cardones ───────────── */ --gi-primary: #E04020; /* brand naranja */ --gi-primary-fg: #ffffff; --gi-primary-hover: #C4321A; /* brand naranja más oscuro */ /* ─── Muted / Secondary ─────────────────────────────────────────────── */ --gi-muted: #f1f5f9; /* slate-100 */ --gi-muted-2: #f8fafc; /* slate-50 — fill aún más sutil (header tabla) */ --gi-muted-fg: #64748b; /* slate-500 */ --gi-faint: #94a3b8; /* slate-400 — texto tenue / placeholder */ --gi-secondary: #f1f5f9; --gi-secondary-fg: #1e293b; /* ─── Accent (hover / highlight) — tonos suaves brand Cardones ──────── */ --gi-accent: #FFF1ED; /* naranja-50 muy claro */ --gi-accent-fg: #B23A1A; /* naranja terracota oscuro */ /* ─── Semánticas ────────────────────────────────────────────────────── */ --gi-destructive: #ef4444; --gi-destructive-fg: #ffffff; --gi-success: #10b981; --gi-success-fg: #ffffff; --gi-warning: #f59e0b; --gi-warning-fg: #1e293b; --gi-info: #6366f1; --gi-info-fg: #ffffff; /* ─── Pares semánticos surface+text (badges / alerts) ───────────────── */ --gi-success-bg: #dcfce7; --gi-success-text: #166534; --gi-danger-bg: #fee2e2; --gi-danger-text: #991b1b; --gi-warning-bg: #fef3c7; --gi-warning-text: #92400e; --gi-info-bg: #dbeafe; --gi-info-text: #1e40af; /* ─── Borders / inputs ──────────────────────────────────────────────── */ --gi-border: #e2e8f0; /* slate-200 */ --gi-border-strong: #cbd5e1; /* slate-300 — borde más marcado */ --gi-input-border: #d1d5db; --gi-ring: rgba(224, 64, 32, 0.35); /* focus ring brand */ /* ─── Radius ────────────────────────────────────────────────────────── */ --gi-radius: 14px; --gi-radius-sm: 8px; --gi-radius-lg: 20px; /* ─── Sidebar (modo dark, contraste contra body light) ──────────────── */ --gi-sidebar: #0f172a; /* slate-900 */ --gi-sidebar-hover: #1e293b; /* slate-800 */ --gi-sidebar-active: #3b82f6; /* blue-500 */ --gi-sidebar-fg: #cbd5e1; /* slate-300 */ --gi-sidebar-fg-active: #ffffff; --gi-sidebar-divider: rgba(148, 163, 184, 0.18); --gi-sidebar-muted: rgba(203, 213, 225, 0.55); /* ─── Tipografía ────────────────────────────────────────────────────── */ --gi-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* ─── Shadows ───────────────────────────────────────────────────────── */ --gi-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --gi-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); --gi-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.08); --gi-shadow-lg: 0 10px 24px rgba(15, 23, 42, 0.12); } /* ════════════════════════════════════════════════════════════════════════════ DARK MODE — overrides cuando ──────────────────────────────────────────────────────────────────────────── Paleta slate profunda (matchea el screenshot): fondo casi negro, cards un escalón más claras, texto claro, acento naranja brand intacto. Solo se redefinen los tokens que cambian; radius/font/etc. se heredan del :root. ════════════════════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { color-scheme: dark; /* ─── Surfaces ──────────────────────────────────────────────────────── */ --gi-bg: #0b1120; /* slate-950+ — fondo app */ --gi-fg: #e2e8f0; /* slate-200 — texto principal */ --gi-fg-strong: #f8fafc; /* casi blanco — títulos */ --gi-body: #cbd5e1; /* slate-300 — cuerpo */ --gi-card: #131c31; /* card un escalón sobre el bg */ --gi-card-fg: #e2e8f0; --gi-card-elevated: #1b2740; /* popover / elevado */ --gi-popover: #1b2740; --gi-popover-fg: #e2e8f0; /* ─── Primary — el naranja brand funciona tal cual sobre oscuro ─────── */ --gi-primary: #E04020; --gi-primary-fg: #ffffff; --gi-primary-hover: #f2552f; /* ─── Muted / Secondary ─────────────────────────────────────────────── */ --gi-muted: #1e293b; /* slate-800 */ --gi-muted-2: #172033; /* fill sutil (header tabla) */ --gi-muted-fg: #94a3b8; /* slate-400 */ --gi-faint: #64748b; /* slate-500 */ --gi-secondary: #1e293b; --gi-secondary-fg: #e2e8f0; /* ─── Accent ────────────────────────────────────────────────────────── */ --gi-accent: rgba(224, 64, 32, 0.16); --gi-accent-fg: #fb923c; /* ─── Semánticas (sólidos: mismos hues) ─────────────────────────────── */ --gi-destructive: #ef4444; --gi-destructive-fg: #ffffff; --gi-success: #10b981; --gi-success-fg: #042f1e; --gi-warning: #f59e0b; --gi-warning-fg: #1e293b; --gi-info: #818cf8; --gi-info-fg: #0b1120; /* ─── Pares semánticos — tinte translúcido + texto claro ────────────── */ --gi-success-bg: rgba(16, 185, 129, 0.16); --gi-success-text: #34d399; --gi-danger-bg: rgba(239, 68, 68, 0.16); --gi-danger-text: #f87171; --gi-warning-bg: rgba(245, 158, 11, 0.16); --gi-warning-text: #fbbf24; --gi-info-bg: rgba(99, 102, 241, 0.18); --gi-info-text: #a5b4fc; /* ─── Borders / inputs ──────────────────────────────────────────────── */ --gi-border: #233048; --gi-border-strong: #324056; --gi-input-border: #324056; --gi-ring: rgba(224, 64, 32, 0.45); /* ─── Sidebar — un escalón distinto al card para separarlo ──────────── */ --gi-sidebar: #0c1424; --gi-sidebar-hover: #18233b; --gi-sidebar-active: #3b82f6; --gi-sidebar-fg: #cbd5e1; --gi-sidebar-fg-active: #ffffff; --gi-sidebar-divider: rgba(148, 163, 184, 0.16); --gi-sidebar-muted: rgba(203, 213, 225, 0.50); /* ─── Shadows — más profundas sobre fondo oscuro ────────────────────── */ --gi-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --gi-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35); --gi-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --gi-shadow-lg: 0 10px 24px rgba(0, 0, 0, 0.55); } /* Brand legacy (--brand-*) en modo dark: el subtle naranja necesita un poco más de opacidad para verse sobre fondo oscuro. */ :root[data-theme="dark"] { --brand-subtle: rgba(224, 64, 32, 0.18); --brand-subtle2: rgba(224, 64, 32, 0.12); }