/* GENERADO desde web/src/styles/tokens.css — NO EDITAR A MANO. Ejecuta: node scripts/sync-design-tokens.mjs */ /* ============================================================ GALENIA PARTNERS — Design Tokens Marca: Galenia Partners — «De farmacéuticos, para farmacéuticos» Tipografía: Cormorant Garamond (titulares) + Inter (interfaz y cifras) ============================================================ */ :root { /* ── Paleta oficial Galenia Partners ── */ --verde-galenia: #0E2E23; /* primario · marca, botones, navegación (sustituye a --verde-botica) */ --verde-hondo: #08211A; /* hover/pressed, fondos oscuros */ --verde-salvia: #3F7A62; /* dato positivo / éxito (sustituye a --menta-senal) */ --dorado: #A48A60; /* acento de marca · líneas, iconos, bordes, foco. NO usar en texto: 2,8:1 sobre crema */ --dorado-texto: #7A6340; /* cualquier TEXTO dorado (≈4,7:1 sobre crema/papel) */ --dorado-hondo: #8A7049; /* hover del acento */ --crema: #F1EDE2; /* superficie cálida, bloques destacados */ --blanco-roto: #F5F1E6; /* fondo de página (sustituye a --hueso) */ --papel: #FFFFFF; /* tarjetas, superficies */ --tinta: #14231C; /* texto principal */ --bruma: #5A6A61; /* texto secundario */ --linea: #E2DCCB; /* bordes, divisores */ --alerta: #B3443A; /* error */ /* ── Aliases legado — nombres antiguos de la paleta (marca anterior), todavía usados directamente en varios componentes. Apuntan a los tokens de marca de arriba: no hace falta tocar esos componentes. No usar estos nombres en código nuevo. ── */ --verde-botica: var(--verde-galenia); --menta-senal: var(--verde-salvia); --hueso: var(--blanco-roto); --ambar: var(--dorado-texto); /* € / valor — siempre como TEXTO, por eso apunta al dorado accesible */ /* Tinte muy claro del verde Galenia sobre crema — chips y highlights suaves (visor de documentos, CRM del admin). Antes apuntaba a un fallback hardcodeado de la paleta vieja (#E7F1EC, menta); ahora es un tono propio, no derivado por rgba(), para que se lea como tinte del verde nuevo y no como menta. */ --verde-tinte: #E6EBE7; /* ── Radios (style guide) ── */ --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-pill: 999px; /* ── Sombras (style guide) ── */ --sombra-s: 0 1px 2px rgba(20,35,28,.06), 0 2px 8px rgba(20,35,28,.05); --sombra-m: 0 4px 14px rgba(20,35,28,.08), 0 18px 40px rgba(8,33,26,.07); /* ── Tipografía — dos familias ── */ --font: "Inter", system-ui, -apple-system, sans-serif; --font-display: "Cormorant Garamond", Georgia, serif; /* ──────────────────────────────────────────────────────────── Aliases semánticos — toda la UI los usa; apuntan a los tokens de paleta arriba ──────────────────────────────────────────────────────────── */ /* Superficie y fondo */ --bg-app: var(--blanco-roto); --bg-surface: var(--papel); --bg-subtle: #EDEAE0; /* ligeramente más cálido que el blanco roto puro */ --bg-muted: #E6E2D5; /* Texto */ --text-strong: var(--tinta); --text: var(--tinta); --text-muted: var(--bruma); --text-soft: #7E8A80; --text-faint: #A9B2A9; /* Bordes */ --border: var(--linea); --border-soft: #ECE7D9; --border-strong: #D3CCB8; /* Brand */ --brand: var(--verde-galenia); --brand-hover: var(--verde-hondo); --brand-dark: var(--verde-hondo); --brand-soft: rgba(14, 46, 35, 0.08); --brand-softer: rgba(14, 46, 35, 0.05); /* Tinte de dato positivo (v12 L63) — no es un tono de --brand: es --verde-salvia al 16%, más intenso que --brand-softer. */ --menta-tinte: rgba(63, 122, 98, 0.16); /* Acento / valor */ --accent-value: var(--verde-salvia); /* Premium / dorado */ --premium: var(--dorado-texto); --premium-hover: var(--dorado-hondo); --premium-soft: #EFE7D6; --premium-softer:#F6F1E6; /* Semánticos */ --success: var(--verde-galenia); --success-bg: rgba(14, 46, 35, 0.08); --warn: var(--dorado-texto); --warn-bg: #EFE7D6; --error: var(--alerta); --error-bg: rgba(179, 68, 58, 0.08); --info: #2C6BA8; --info-bg: #E5EEF6; /* Paleta verde — aliases usados en componentes */ --green-900: var(--verde-hondo); --green-700: var(--verde-galenia); --green-500: var(--verde-galenia); --green-300: var(--verde-salvia); --green-100: rgba(14, 46, 35, 0.08); /* Aliases legado que aún puede usar algún componente */ --sand: var(--bg-subtle); --sand-dark: var(--border); --ink: var(--tinta); --ink-60: var(--bruma); --ink-30: var(--text-faint); --white: var(--papel); --accent: var(--premium); --gold: var(--dorado); /* uso decorativo (fondos, gradientes) — NUNCA como color de texto */ /* Sidebar */ --side-bg: var(--papel); --side-border: var(--linea); --side-text: var(--bruma); --side-text-soft: var(--text-soft); --side-active-bg: rgba(14, 46, 35, 0.08); --side-active-tx: var(--verde-galenia); /* ── Radios — aliases usados en base.css ── */ --r-xs: 4px; --r-sm: var(--r-s); --r-md: var(--r-m); --r-lg: var(--r-l); --r-xl: 20px; /* alias cortos */ --radius: var(--r-s); --radius-lg: var(--r-m); /* ── Sombras — aliases ── */ --shadow-xs: var(--sombra-s); --shadow-sm: var(--sombra-s); --shadow-md: 0 6px 20px rgba(20,35,28,.07); --shadow-lg: var(--sombra-m); /* ── Tipografía — aliases ── --font-serif apunta a --font (Inter) a propósito: se usa tanto en títulos de componente como en CIFRAS (stat-value, importes, KPIs). Las cifras nunca van en Cormorant (regla de marca) — por eso este alias NO se repunta a --font-display. Los titulares de página que sí deben ir en Cormorant usan --font-display directamente (h1, .screen-intro h2). */ --font-sans: var(--font); --font-serif: var(--font); --font-size-xs: 10px; --font-size-sm: 11px; --font-size-base: 13px; --font-size-md: 15px; --font-size-lg: 17px; --font-size-xl: 22px; --font-size-2xl: 28px; /* ── Espaciados ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px; /* ── Layout ── */ --sidebar-width: 220px; --topbar-height: 52px; --content-padding: 28px 32px 56px; --content-max-width: 1360px; }