/* ============================================================ GENERADO — NO EDITAR A MANO. Origen: tengodesign/tengo_handoff_v2/tokens/tokens.css @ d6cf912 Regenerar: ./scripts/sync-tokens.sh ============================================================ */ /* ============================================ Tengo — Design Tokens (CSS Custom Properties) Fuente de verdad del sistema visual. Importá este archivo y consumí variables — nunca hardcodees colores ni medidas. Uso: Dark mode: añadí `data-theme="dark"` a o . Sigue automáticamente la preferencia del sistema vía media query. Spec completo: ../DESIGN.md ============================================ */ @import url('https://api.fontshare.com/v2/css?f[]=general-sans@200,300,400,500,600,700&display=swap'); :root { /* -------- Marca -------- */ --tengo-primary: #6D00D6; --tengo-primary-dark: #4D0099; --tengo-primary-light: #EFE4FF; --tengo-primary-tint: #F7F2FF; --tengo-primary-fg: #4D0099; --logo-tile: #FFFFFF; /* -------- Superficies -------- */ --tengo-bg: #FAFAF7; --tengo-surface: #FFFFFF; --tengo-surface-soft: #F2F1EC; --tengo-surface-press: #E9E7DF; --tengo-border: #E8E6E0; --tengo-border-strong: #D5D2C9; --tengo-border-control: #8E8B97; /* -------- Texto -------- */ --tengo-text-primary: #15131C; --tengo-text-secondary: #5B5867; --tengo-text-muted: #8E8B97; --tengo-text-on-primary: #FFFFFF; /* -------- Estados semánticos -------- */ --tengo-success: #1F8A4E; --tengo-success-soft: #E6F3EC; --tengo-danger: #C3372A; --tengo-danger-soft: #FBEAE7; --tengo-warning: #B27A00; --tengo-warning-soft: #FBF1DA; --tengo-info: #2B5BD4; --tengo-info-soft: #E5ECFB; --tengo-pending: #0E7C86; --tengo-pending-soft: #E2F1F2; /* -------- Tipografía -------- */ --tengo-font: 'General Sans', system-ui, -apple-system, sans-serif; /* Escala (px) */ --tengo-text-display: 56px; --tengo-text-saldo-hero: 46px; --tengo-text-saldo-card: 17px; --tengo-text-h1: 28px; --tengo-text-h2: 22px; --tengo-text-body: 15px; --tengo-text-body-strong: 14px; --tengo-text-sm: 13px; --tengo-text-xs: 12px; --tengo-text-label: 11px; /* Pesos */ --tengo-weight-regular: 400; --tengo-weight-medium: 500; --tengo-weight-semi: 600; --tengo-weight-bold: 700; /* Tracking */ --tengo-track-display: -0.04em; --tengo-track-saldo-hero: -0.03em; --tengo-track-h1: -0.015em; --tengo-track-h2: -0.01em; --tengo-track-label: 0.1em; --tengo-track-mono: 0.08em; /* -------- Espaciado (base 4px) -------- */ --tengo-space-2xs: 2px; --tengo-space-xs: 4px; --tengo-space-sm: 8px; --tengo-space-md: 16px; --tengo-space-lg: 24px; --tengo-space-xl: 32px; --tengo-space-2xl: 48px; --tengo-space-3xl: 64px; /* -------- Radios -------- */ --tengo-radius-sm: 6px; --tengo-radius-md: 10px; --tengo-radius-lg: 14px; --tengo-radius-xl: 20px; --tengo-radius-pill: 999px; /* -------- Sombras -------- */ --tengo-shadow-sm: 0 1px 2px rgba(21, 19, 28, 0.04); --tengo-shadow-md: 0 4px 12px rgba(21, 19, 28, 0.06); --tengo-shadow-lg: 0 12px 32px rgba(21, 19, 28, 0.08); --tengo-shadow-fab: 0 8px 24px rgba(109,0,214, 0.35); /* -------- Motion -------- */ --tengo-ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1); --tengo-ease-exit: cubic-bezier(0.4, 0.0, 1, 1); --tengo-ease-move: cubic-bezier(0.4, 0.0, 0.2, 1); --tengo-dur-micro: 100ms; --tengo-dur-short: 200ms; --tengo-dur-medium: 300ms; } /* =============================================== Dark mode — overrides Activar con data-theme="dark" en o =============================================== */ :root[data-theme="dark"] { /* Marca */ --tengo-primary: #8B4BE0; --tengo-primary-dark: #6326B0; --tengo-primary-light: #2E1A4A; --tengo-primary-tint: #1C1226; --tengo-primary-fg: #C9A6F5; --logo-tile: #FFFFFF; /* Superficies */ --tengo-bg: #0E0C13; --tengo-surface: #18151F; --tengo-surface-soft: #221E2C; --tengo-surface-press: #2C2737; --tengo-border: #2C2737; --tengo-border-strong: #3A3447; --tengo-border-control: #807C8B; /* Texto */ --tengo-text-primary: #F2F0F5; --tengo-text-secondary: #B0ACBA; --tengo-text-muted: #807C8B; --tengo-text-on-primary: #FFFFFF; /* Semánticos */ --tengo-success: #4ABE7B; --tengo-success-soft: #163020; --tengo-danger: #E36757; --tengo-danger-soft: #2E1814; --tengo-warning: #D4A03A; --tengo-warning-soft: #2E2310; --tengo-info: #6B8EE8; --tengo-info-soft: #161D33; --tengo-pending: #46B5BF; --tengo-pending-soft: #0F272A; /* Sombras (más oscuras para visibilidad sobre dark bg) */ --tengo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --tengo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --tengo-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --tengo-shadow-fab: 0 8px 24px rgba(0, 0, 0, 0.60); } /* =============================================== Soporte automático de prefers-color-scheme. Si el usuario tiene dark mode en el sistema y el sitio no setea data-theme manual, aplicar dark. =============================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tengo-primary: #8B4BE0; --tengo-primary-dark: #6326B0; --tengo-primary-light: #2E1A4A; --tengo-primary-tint: #1C1226; --tengo-primary-fg: #C9A6F5; --tengo-bg: #0E0C13; --tengo-surface: #18151F; --tengo-surface-soft: #221E2C; --tengo-surface-press: #2C2737; --tengo-border: #2C2737; --tengo-border-strong: #3A3447; --tengo-border-control: #807C8B; --tengo-text-primary: #F2F0F5; --tengo-text-secondary: #B0ACBA; --tengo-text-muted: #807C8B; --tengo-text-on-primary: #FFFFFF; --tengo-success: #4ABE7B; --tengo-success-soft: #163020; --tengo-danger: #E36757; --tengo-danger-soft: #2E1814; --tengo-warning: #D4A03A; --tengo-warning-soft: #2E2310; --tengo-info: #6B8EE8; --tengo-info-soft: #161D33; --tengo-pending: #46B5BF; --tengo-pending-soft: #0F272A; --tengo-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40); --tengo-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --tengo-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --tengo-shadow-fab: 0 8px 24px rgba(0, 0, 0, 0.60); /* Mismo valor que en :root, así que hoy no cambia nada. Va igual para que los dos caminos oscuros —el interruptor y la preferencia del sistema— declaren EXACTAMENTE el mismo conjunto de tokens. Cuando no lo hacían, --tengo-primary-fg faltaba acá y en sistema-oscuro los enlaces salían a 1.64:1 sobre el fondo: morado de modo claro sobre papel oscuro. */ --logo-tile: #FFFFFF; } } /* =============================================== Base body styles Aplicalas en el root de la app o copialas a tu globals.css =============================================== */ /* body { font-family: var(--tengo-font); background: var(--tengo-bg); color: var(--tengo-text-primary); -webkit-font-smoothing: antialiased; font-feature-settings: "ss01" on; } */