Colores

Colores base

Negros, blancos y off-white. Punto de partida de la paleta neutra.

--co-color-base-negro #1f1c1b

--co-color-base-blanco #ffffff

--co-color-base-off-white #f7f6f0

Primary

Los cuatro colores de marca Prolibu. Verde es el principal, Azul se usa para acciones interactivas.

--co-color-primary-verde #02a270

--co-color-primary-amarillo #fdbf00

--co-color-primary-azul #2563eb

--co-color-primary-rosado #f32a73

Escalas — Azul

--co-color-azul-100 #eff4ff

--co-color-azul-200 #dbe6fe

--co-color-azul-300 #bfd3fe

--co-color-azul-400 #93b4fd

--co-color-azul-500 #6090fa

--co-color-azul-600 #3b76f6

--co-color-azul-700 #2563eb

--co-color-azul-800 #1d58d8

--co-color-azul-900 #1e408a

Escalas — Verde

--co-color-verde-100 #ecfdf5

--co-color-verde-200 #d0fbe5

--co-color-verde-300 #a5f5d0

--co-color-verde-400 #6beab8

--co-color-verde-500 #31d69a

--co-color-verde-600 #0cbd82

--co-color-verde-700 #02a270

--co-color-verde-800 #027a58

--co-color-verde-900 #046147

Escalas — Amarillo

--co-color-amarillo-100 #ffffea

--co-color-amarillo-200 #fffbc5

--co-color-amarillo-300 #fff885

--co-color-amarillo-400 #ffe01b

--co-color-amarillo-500 #fdbf00

--co-color-amarillo-600 #e29500

--co-color-amarillo-700 #bb6902

--co-color-amarillo-800 #985108

--co-color-amarillo-900 #7c420b

Escalas — Rosado

--co-color-rosado-100 #fef1f6

--co-color-rosado-200 #fde6f0

--co-color-rosado-300 #fdcde2

--co-color-rosado-400 #fda4c8

--co-color-rosado-500 #fb6ba3

--co-color-rosado-600 #f32a73

--co-color-rosado-700 #e41e5c

--co-color-rosado-800 #c61044

--co-color-rosado-900 #a41039

Grises

--co-color-gray-100 #f6f6f6

--co-color-gray-200 #e3e3e3

--co-color-gray-300 #c4c4c4

--co-color-gray-400 #a0a0a0

--co-color-gray-500 #888888

--co-color-gray-600 #585858

--co-color-gray-700 #1f1c1b

--co-color-gray-800 #0a0a0a

Neutrales

--co-color-neutral-100 #e6e5df

--co-color-neutral-200 #eeede7

--co-color-neutral-300 #f3f2ec

Secundarios

--co-color-secondary-rosado-100 #d74ba0

--co-color-secondary-rosado-50 #ffc8eb

--co-color-secondary-rosado-25 #ffe6f5

--co-color-secondary-rojo-100 #eb1e1e

--co-color-secondary-rojo-50 #ff878c

--co-color-secondary-rojo-25 #ffd7dc

--co-color-secondary-naranja-100 #f0821e

--co-color-secondary-naranja-50 #ffbe82

--co-color-secondary-naranja-25 #ffe6d2

--co-color-secondary-amarillo-100 #fad223

--co-color-secondary-amarillo-50 #ffe67d

--co-color-secondary-amarillo-25 #fffac3

--co-color-secondary-verde-100 #afe664

--co-color-secondary-verde-50 #d7ffb4

--co-color-secondary-verde-25 #ebffc8

--co-color-secondary-oliva-100 #aab43c

--co-color-secondary-oliva-50 #d2dc96

--co-color-secondary-oliva-25 #f0f0d2

--co-color-secondary-turquesa-100 #00afaf

--co-color-secondary-turquesa-50 #3ce1c8

--co-color-secondary-turquesa-25 #c8f0f0

--co-color-secondary-azul-claro-100 #00bee6

--co-color-secondary-azul-claro-50 #6ee6f0

--co-color-secondary-azul-claro-25 #befaff

--co-color-secondary-azul-electrico-100 #000aff

--co-color-secondary-azul-electrico-50 #8095ff

--co-color-secondary-azul-electrico-25 #cce0ff

--co-color-secondary-violeta-100 #5f4bd7

--co-color-secondary-violeta-50 #b9b4ff

--co-color-secondary-violeta-25 #e1e1ff

--co-color-secondary-marron-100 #af7355

--co-color-secondary-marron-50 #d7b9a5

--co-color-secondary-marron-25 #f0e1d7

--co-color-secondary-guinda-100 #811137

--co-color-secondary-guinda-50 #c0889c

--co-color-secondary-guinda-25 #e6cfd7

Status

Colores semánticos para estados de UI (success, error, warning, progress, etc.).

--co-color-status-success #0a7724

--co-color-status-bg-success #ebf9ec

--co-color-status-progress #2d6cc5

--co-color-status-bg-progress #eef3fa

--co-color-status-submitted #7556ca

--co-color-status-bg-submitted #f4f1fb

--co-color-status-review #85571f

--co-color-status-bg-review #fcf5db

--co-color-status-pending #b45103

--co-color-status-bg-pending #f9f1eb

--co-color-status-error #aa2e1b

--co-color-status-bg-error #ffefef

Opacity

Capas semitransparentes sobre negro y blanco — útiles para hover, overlays y bordes sutiles.

--co-color-opacity-negro-4 rgba(31, 28, 27, 0.04)

--co-color-opacity-negro-8 rgba(31, 28, 27, 0.08)

--co-color-opacity-negro-16 rgba(31, 28, 27, 0.16)

--co-color-opacity-negro-25 rgba(31, 28, 27, 0.25)

--co-color-opacity-negro-50 rgba(31, 28, 27, 0.50)

--co-color-opacity-negro-80 rgba(31, 28, 27, 0.80)

--co-color-opacity-blanco-4 rgba(255, 255, 255, 0.04)

--co-color-opacity-blanco-8 rgba(255, 255, 255, 0.08)

--co-color-opacity-blanco-16 rgba(255, 255, 255, 0.16)

--co-color-opacity-blanco-25 rgba(255, 255, 255, 0.25)

--co-color-opacity-blanco-50 rgba(255, 255, 255, 0.50)

--co-color-opacity-blanco-80 rgba(255, 255, 255, 0.80)