/* ========================================================================== ENCCI — VARIABLES / DESIGN TOKENS Bootstrap 5 compatible -------------------------------------------------------------------------- ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Manrope:wght@200..800&family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap'); :root { /* ======================================================================== 01. PALETA DE IDENTIDAD ======================================================================== */ /* Turquesa principal */ --encci-primary: #81cbd4; --encci-primary-dark: #5aaeb8; --encci-primary-verydark: #17394a; --encci-primary-light: #bbe1e6; /* Amarillo de acento */ --encci-secondary: #ffed00; --encci-secondary-soft: #ffe84d; /* Colores complementarios */ --encci-cyan: #5fc0cb; --encci-mint: #8fcfb0; --encci-purple: #a98fe8; /* ======================================================================== 02. RGB — para transparencias ======================================================================== */ --encci-primary-rgb: 129, 203, 212; --encci-primary-dark-rgb: 90, 174, 184; --encci-primary-verydark-rgb: 23, 57, 74; --encci-secondary-rgb: 255, 237, 0; --encci-cyan-rgb: 95, 192, 203; --encci-mint-rgb: 143, 207, 176; --encci-purple-rgb: 169, 143, 232; /* ======================================================================== 03. TEXTO ======================================================================== */ --encci-text: #173942; --encci-text-light: #5b6f7d; --encci-text-muted: #728395; --encci-text-rgb: 23, 57, 66; --encci-text-light-rgb: 91, 111, 125; /* ======================================================================== 04. SUPERFICIES ======================================================================== */ --encci-white: #ffffff; /* Fondo principal cálido */ --encci-surface: #fffdf7; /* Fondos secundarios */ --encci-surface-alt: #f6fcfd; --encci-surface-blue: #eef8fa; --encci-surface-soft: #fbfcfd; /* Superficies con color de identidad */ --encci-surface-primary: rgba(var(--encci-primary-rgb), .10); --encci-surface-primary-soft: rgba(var(--encci-primary-rgb), .06); --encci-surface-secondary: rgba(var(--encci-secondary-rgb), .12); --encci-surface-mint: rgba(var(--encci-mint-rgb), .12); /* ======================================================================== 05. BORDES Y LÍNEAS ======================================================================== */ --encci-border: #dceef1; --encci-border-strong: #c9dfe3; --encci-line: #dfe3e4; --encci-border-rgb: 220, 238, 241; /* ======================================================================== 06. ESTADOS ======================================================================== */ --encci-success: #2d9c5a; --encci-success-bg: #e8f7ee; --encci-warning: #ff9800; --encci-warning-bg: #fff8ef; --encci-error: #c94b4b; --encci-error-bg: #fff1f1; --encci-info: var(--encci-primary); --encci-info-bg: var(--encci-surface-blue); --encci-focus: var(--encci-secondary); --encci-hover-surface: var(--encci-surface-blue); --encci-disabled: #bfc4c6; --encci-disabled-bg: #f1f3f4; /* ======================================================================== 07. SOMBRAS ======================================================================== */ /* La identidad ENCCI debe apoyarse más en superficies y bordes que en sombras fuertes. */ --encci-shadow-sm: 0 6px 20px rgba(23, 57, 66, .05); --encci-shadow: 0 12px 35px rgba(23, 57, 66, .10); --encci-shadow-lg: 0 20px 50px rgba(18, 55, 72, .10); /* ======================================================================== 08. ESPACIADO ======================================================================== */ --space-xs: .5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --section-spacing: 5rem; --section-spacing-sm: 3.5rem; --component-gap: 1.5rem; /* ======================================================================== 09. RADIOS ======================================================================== */ --radius-sm: 12px; --radius-md: 18px; --radius-lg: 24px; --radius-pill: 999px; /* ======================================================================== 10. CONTENEDORES Y CONTROLES ======================================================================== */ --encci-container-width: 1280px; --encci-content-width: 760px; --encci-control-height: 52px; --encci-control-height-lg: 60px; /* ======================================================================== 11. TIPOGRAFÍA ======================================================================== */ --logo-family: "Archivo Black", sans-serif; --body-family: "Source Sans 3", sans-serif; --title-family: "Manrope", sans-serif; /* ======================================================================== 12. HEADER ======================================================================== */ --header-height: 74px; --header-height-sticky: 70px; --header-bg: rgba(255, 255, 255, .92); --header-bg-sticky: rgba(255, 255, 255, .96); --header-border: #e7eef0; --header-shadow: 0 10px 35px rgba(0, 0, 0, .06); --header-shadow-sticky: 0 12px 30px rgba(0, 0, 0, .08); --menu-radius: 18px; /* ======================================================================== 13. TRANSICIONES ======================================================================== */ --transition-fast: .18s ease; --transition: .28s cubic-bezier(.4, 0, .2, 1); --transition-slow: .4s cubic-bezier(.4, 0, .2, 1); /* ======================================================================== 14. ALIAS DE COMPATIBILIDAD ------------------------------------------------------------------------ Mantener estos nombres durante la migración de las CSS existentes. Una vez migrados todos los componentes, podrán eliminarse. ======================================================================== */ --primary: var(--encci-primary); --primary-dark: var(--encci-primary-dark); --primary-verydark: var(--encci-primary-verydark); --primary-light: var(--encci-primary-light); --secondary: var(--encci-secondary); --cyan: var(--encci-cyan); --pink: var(--encci-secondary-soft); --purple: var(--encci-purple); --text: var(--encci-text); --text-light: var(--encci-text-light); --border: var(--encci-border); --surface: var(--encci-surface); --surface-alt: var(--encci-surface-alt); --shadow-sm: var(--encci-shadow-sm); --shadow: var(--encci-shadow); /* ======================================================================== 15. BOOTSTRAP 5 ------------------------------------------------------------------------ Estos tokens permiten que Bootstrap utilice la identidad ENCCI. ======================================================================== */ --bs-primary: var(--encci-primary); --bs-primary-rgb: var(--encci-primary-rgb); --bs-secondary: var(--encci-secondary); --bs-secondary-rgb: var(--encci-secondary-rgb); --bs-body-color: var(--encci-text); --bs-body-color-rgb: var(--encci-text-rgb); --bs-body-bg: #ffffff; --bs-link-color: var(--encci-primary-dark); --bs-link-color-rgb: var(--encci-primary-dark-rgb); --bs-link-hover-color: var(--encci-primary-verydark); --bs-border-color: var(--encci-border); --bs-success: var(--encci-success); --bs-warning: var(--encci-warning); --bs-danger: var(--encci-error); --bs-info: var(--encci-info); --bs-border-radius: var(--radius-sm); --bs-border-radius-lg: var(--radius-md); --bs-border-radius-xl: var(--radius-lg); --bs-border-radius-pill: var(--radius-pill); } /* ========================================================================== BOOTSTRAP — botones ENCCI ========================================================================== */ .btn-primary { --bs-btn-bg: var(--encci-primary); --bs-btn-border-color: var(--encci-primary); --bs-btn-hover-bg: var(--encci-primary-dark); --bs-btn-hover-border-color: var(--encci-primary-dark); --bs-btn-color: var(--encci-primary-verydark); --bs-btn-hover-color: #ffffff; } .btn-secondary { --bs-btn-bg: #ffffff; --bs-btn-border-color: var(--encci-primary); --bs-btn-hover-bg: var(--encci-surface-blue); --bs-btn-hover-border-color: var(--encci-primary-dark); --bs-btn-color: var(--encci-primary-verydark); --bs-btn-hover-color: var(--encci-primary-verydark); } /* ========================================================================== NOTA -------------------------------------------------------------------------- No introducir nuevos colores directamente en componentes o páginas. ========================================================================== */