/* Copia de resources/brand/c2fleet-dev-kit/css/tokens.css (kit de marca v2.0 «Pista»). El tema oscuro se activa con data-bs-theme="dark" (Bootstrap) además de data-theme="dark" del kit. No editar a mano: actualizar desde el kit. */ /* ========================================================================== C2Fleet · Tokens de diseño · v2.0 (rebranding «Pista») Un servicio de Conecta2Nic. Tema por defecto: Claro. Tema oscuro: [data-theme="dark"] (Grafito). ========================================================================== */ :root { /* ---- Marca (no cambian con el tema) ---- */ --c2-grafito: #15181c; /* color de marca: logo, barra superior, texto */ --c2-asfalto: #2b3038; /* paneles oscuros, campos sobre grafito */ --c2-asfalto-line: #3a414b; /* bordes y divisores sobre grafito */ --c2-rojo: #d92b22; /* Rojo pista · único acento: CTA, insignias, nodos */ --c2-rojo-hover: #bf231b; --c2-rojo-vivo: #ff5a4f; /* rojo para texto/acentos SOBRE grafito */ --c2-plata: #d5dbe1; /* apoyo: insignias neutras, rellenos */ --c2-on-brand: #ffffff; /* texto sobre grafito y asfalto */ --c2-on-accent: #ffffff; /* texto sobre rojo */ /* Herencia Conecta2Nic (solo en estados funcionales) */ --c2-xolotlan: #1a5b93; --c2-sacuanjoche: #fcc018; /* ---- Tema claro (semánticos) ---- */ --c2-surface: #ffffff; --c2-surface-soft: #f3f4f6; --c2-surface-tint: #e9ecef; --c2-line: #cfd5dc; --c2-ink: #15181c; --c2-ink-muted: #4a515b; --c2-accent-ink: #b3221a; /* palabra destacada, cifras clave (6.6:1 sobre blanco) */ --c2-focus: #1a5b93; --c2-app-bg: #f3f4f6; --c2-topbar: #15181c; /* ---- Estados del vehículo (fondo / texto / punto) ---- */ --c2-status-disponible-bg: #e3f4ea; --c2-status-disponible-fg: #145c3b; --c2-status-disponible-dot: #1e8a5a; --c2-status-alquilado-bg: #e8f0f8; --c2-status-alquilado-fg: #1a5b93; --c2-status-alquilado-dot: #1a5b93; --c2-status-reservado-bg: #fff3cc; --c2-status-reservado-fg: #6b4e00; --c2-status-reservado-dot: #fcc018; --c2-status-limpieza-bg: #e2f3f8; --c2-status-limpieza-fg: #0f5a6e; --c2-status-limpieza-dot: #2a8fad; --c2-status-taller-bg: #fdeedc; --c2-status-taller-fg: #8a4300; --c2-status-taller-dot: #e07a12; /* ---- Retroalimentación ---- */ --c2-success-bg: #e3f4ea; --c2-success-fg: #145c3b; --c2-warning-bg: #fff3cc; --c2-warning-fg: #6b4e00; --c2-danger-bg: #fbe4e2; --c2-danger-fg: #9b1c15; --c2-danger: #b3221a; --c2-info-bg: #e8f0f8; --c2-info-fg: #1a5b93; /* ---- Tipografía ---- */ --c2-font-display: "Exo 2", "Trebuchet MS", sans-serif; --c2-font-text: Roboto, "Helvetica Neue", Arial, sans-serif; --c2-font-mono: "Courier New", Courier, monospace; /* tamaño / interlínea / peso */ --c2-display-size: 56px; --c2-display-lh: 58px; --c2-display-weight: 900; --c2-headline-size: 40px; --c2-headline-lh: 44px; --c2-headline-weight: 900; --c2-title-size: 28px; --c2-title-lh: 34px; --c2-title-weight: 800; --c2-subtitle-size: 20px; --c2-subtitle-lh: 28px; --c2-subtitle-weight: 700; --c2-label-size: 13px; --c2-label-lh: 16px; --c2-label-weight: 800; --c2-label-tracking: 0.08em; --c2-body-lg-size: 18px; --c2-body-lg-lh: 28px; --c2-body-size: 16px; --c2-body-lh: 24px; --c2-small-size: 15px; --c2-small-lh: 22px; --c2-caption-size: 13px; --c2-caption-lh: 18px; --c2-mono-size: 15px; --c2-mono-lh: 22px; /* ---- Espaciado (pasos de 4 px) ---- */ --c2-space-1: 4px; --c2-space-2: 8px; --c2-space-3: 12px; --c2-space-4: 16px; --c2-space-5: 20px; --c2-space-6: 24px; --c2-space-8: 32px; --c2-space-10: 40px; --c2-space-12: 48px; --c2-space-16: 64px; /* ---- Radios ---- */ --c2-radius-sm: 6px; --c2-radius-md: 12px; --c2-radius-lg: 28px; --c2-radius-pill: 999px; /* ---- Sombra (solo dura; nunca difusa) ---- */ --c2-shadow-offset: 0 8px 0 #15181c; --c2-shadow-offset-sm: 0 4px 0 #15181c; /* ---- Layout ---- */ --c2-container-max: 1440px; --c2-sidebar-w: 248px; --c2-topbar-h: 72px; --c2-touch-min: 44px; --c2-focus-ring: 0 0 0 3px var(--c2-focus); /* ---- Movimiento ---- */ --c2-ease: cubic-bezier(0.2, 0, 0, 1); --c2-duration-fast: 120ms; --c2-duration: 200ms; } /* ---- Tema oscuro · Grafito ---- */ [data-theme="dark"], [data-bs-theme="dark"] { --c2-surface: #15181c; --c2-surface-soft: #2b3038; --c2-surface-tint: #22262c; --c2-line: #3a414b; --c2-ink: #ffffff; --c2-ink-muted: #b9c0c8; --c2-accent-ink: #ff5a4f; --c2-focus: #ffffff; --c2-app-bg: #0f1114; --c2-topbar: #0f1114; --c2-shadow-offset: 0 8px 0 #d92b22; --c2-shadow-offset-sm: 0 4px 0 #d92b22; } @media (prefers-reduced-motion: reduce) { :root { --c2-duration-fast: 0ms; --c2-duration: 0ms; } } /* C2Fleet · Fuentes autoalojadas (SIL Open Font License). Alternativa: Google Fonts */ @font-face { font-family: "Exo 2"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Exo2-Regular.woff") format("woff"); } @font-face { font-family: "Exo 2"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Exo2-SemiBold.woff") format("woff"); } @font-face { font-family: "Exo 2"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Exo2-Bold.woff") format("woff"); } @font-face { font-family: "Exo 2"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/Exo2-ExtraBold.woff") format("woff"); } @font-face { font-family: "Exo 2"; font-weight: 900; font-style: normal; font-display: swap; src: url("../fonts/Exo2-Black.woff") format("woff"); } @font-face { font-family: "Roboto"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Roboto-Regular.woff") format("woff"); } @font-face { font-family: "Roboto"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Roboto-Medium.woff") format("woff"); } @font-face { font-family: "Roboto"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Roboto-Bold.woff") format("woff"); }