/* ============================================================ CNTA · Brand Tokens ------------------------------------------------------------ Fuente de verdad de los tokens visuales de CNTA. Este archivo está pensado para ser consumido por: 1. La plantilla de login centralizado (auth-pre.cnta.es). 2. El design system React del Gestor (importado como CSS en `index.css`, sustituyendo a las definiciones locales). 3. Cualquier nuevo servicio que adopte el sistema CNTA. Si Marketing decide cambiar el verde de marca, solo se tocan las 5 variables `--brand-*` aquí. Todo el ecosistema se repinta. No contiene componentes ni layout — solo tokens. ============================================================ */ :root { /* ===== Paleta corporativa (Manual de Marca CNTA, A.03) ===== */ /* Pantone 375C — verde lima CNTA. Usamos el tono "sobrio" #7fbb00 en superficies grandes (CTAs, sidebar) porque #93d600 satura mucho; el #93d600 queda como token del logo. */ --lime-500: #7fbb00; --lime-600: #6ba300; --lime-50: #eaf5c8; --lime-logo:#93d600; /* Pantone Black + White */ --black: #1e1e1e; --white: #ffffff; /* Grises corporativos (Manual A.03) */ --gray-900: #1e1e1e; --gray-700: #4a4a4a; --gray-500: #8a8a8a; --gray-300: #c6c6c6; --gray-200: #ededed; --gray-100: #f5f5f5; /* Secundarios (apoyo, nunca sustituyen primarios) */ --accent-teal: #3cdbc0; /* Pantone 333C */ --accent-teal-dark: #00a499; --accent-coral: #e28474; /* Pantone 4051C */ --accent-coral-soft:#eaa794; /* ===== Marca (THEMABLE) ========================================== Estas 5 variables gobiernan el "color del producto". Para repintar toda una app a otro color basta sobrescribirlas. Por defecto = verde lima CNTA. */ --brand-500: var(--lime-500); /* color principal */ --brand-600: var(--lime-600); /* hover/active */ --brand-700: #4f7400; /* texto/icono sobre fondo claro */ --brand-soft: var(--lime-50); /* fondo "selected" sutil */ --brand-on-solid: var(--black); /* texto sobre brand-500 */ /* ===== Tokens de interfaz (mapeados a la marca) ===== */ --bg: var(--gray-100); --bg-soft: #fafafa; --panel: var(--white); --line: var(--gray-200); --line-soft: #f3f3f3; --ink: var(--gray-900); --ink-2: var(--gray-700); --ink-3: var(--gray-500); --ink-4: var(--gray-300); /* ===== Semánticos (UI funcional) ===== */ --ok: #2a8a3a; --ok-bg: #e9f6ec; --warn: #c97000; --warn-bg: #fef4e1; --danger: #c64a3f; --danger-bg: #fbe9e6; --info: var(--accent-teal-dark); --info-bg: #e0f5f2; /* ===== Radios ===== */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; /* ===== Sombras ===== */ --shadow-sm: 0 1px 2px rgba(30, 30, 30, 0.05); --shadow-md: 0 6px 18px -8px rgba(30, 30, 30, 0.18), 0 2px 6px rgba(30, 30, 30, 0.04); --shadow-lg: 0 24px 48px -24px rgba(30, 30, 30, 0.28), 0 4px 10px rgba(30, 30, 30, 0.06); /* ===== Tipografías corporativas (Manual A.04) ===== Title: Montserrat | Body: Roboto | Mono: JetBrains Mono. Fallback Office: Segoe UI. NO introducir otra display font sin justificación documentada. */ --font-display: 'Montserrat', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-body: 'Roboto', 'Segoe UI', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* Esquema de color del navegador — afecta a controles nativos. */ color-scheme: light; } /* ============================================================ DARK MODE El consumidor aplica `data-theme="dark"` al . Solo redefinimos tokens "themables" (superficies, líneas, marca). Las pantallas de login se sirven en LIGHT por defecto — el contraste del panel lateral negro + form blanco es la firma visual y no debe parpadear si el OS está en oscuro. ============================================================ */ :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1311; --bg-soft: #161c1a; --panel: #1a2220; --line: #2a322f; --line-soft: #232a28; --ink: #e8eae9; --ink-2: #b9bebc; --ink-3: #7c8682; --ink-4: #4a534f; --gray-100: #161c1a; --gray-200: #232a28; --gray-300: #3a4540; --gray-500: #7c8682; --gray-700: #b9bebc; --gray-900: #e8eae9; --brand-500: #93d600; --brand-600: #a8e825; --brand-700: #c9eb6c; --brand-soft: rgba(127, 187, 0, 0.14); --brand-on-solid: var(--black); --ok: #5cc66f; --ok-bg: rgba(92, 198, 111, 0.14); --warn: #f0a043; --warn-bg: rgba(240, 160, 67, 0.14); --danger: #e87b6f; --danger-bg: rgba(232, 123, 111, 0.14); }