# Skin CSS — Paleta de Colores

> Como funciona el sistema de colores de Porto/BewPro

---

## Concepto

Un skin CSS define la paleta de colores completa de un sitio mediante CSS custom properties. Porto usa 6 colores base que se expanden automaticamente a ~140 variables:

```
6 colores base → cada uno genera:
  - 3 shades mas oscuros (100, 200, 300)
  - 3 shades mas claros (-100, -200, -300)
  - 10 niveles de transparencia (rgba 0-90)
= 6 × 16 = 96 variables de color
+ 6 inverse colors
+ 11 grey scale
= ~113 variables CSS totales
```

## Los 6 colores y su rol

| Variable | Rol en el sitio | Donde se ve |
|----------|----------------|-------------|
| `--primary` | Color de marca principal | Botones, links, badges, iconos activos, CTA |
| `--secondary` | Color de contraste/fondo | Header bg, footer bg, cards, secciones alternas |
| `--tertiary` | Color auxiliar suave | Backgrounds de secciones, bordes, highlights |
| `--quaternary` | Color de detalles | Subtextos, separadores, elementos sutiles |
| `--dark` | Base oscura | Texto principal, titulos, fondos oscuros |
| `--light` | Base clara | Fondos principales, texto sobre dark |

## Colores default por demo

| Demo | Primary | Secondary | Uso tipico |
|------|---------|-----------|------------|
| accounting-1 | #00F0FF (cyan) | #0A0A1A (navy) | Dark mode, tech, agency |
| accounting-2 | #FFBF00 (amber) | #1A1A1A (charcoal) | Dark mode, marca personal |
| architecture-2 | #223A70 (navy) | #C8A897 (sand) | Elegante, minimalista |
| business-consulting | #060d0c (black) | #07f2b0 (green) | Dark, financiero |
| construction | #E04622 (orange) | #EEAB26 (yellow) | Bold, industrial |
| digital-agency-2 | #3fc2c2 (teal) | #060928 (deep navy) | Dark, tech agency |
| insurance | #060d0c (black) | #07f2b0 (green) | Trust, clean |
| law-firm-2 | #1A325D (dark blue) | #808080 (grey) | Corporate, formal |
| marketing-1 | #ADA181 (olive) | #6C8366 (sage) | Natural, creative |
| photography-3 | #9d8b7d (taupe) | #2e2e2e (dark grey) | Dark, artistic |
| real-estate | #1c5fa8 (blue) | #00a4f2 (sky blue) | Clean, premium |
| restaurant | #D44D79 (rose) | #658D2D (green) | Warm, appetizing |

## Comando: bewpro:skin

### Uso basico

```bash
# Generar skin con colores custom
php artisan bewpro:skin --primary=#FF5500 --secondary=#1A1A2E

# Partir de un demo y cambiar solo lo necesario
php artisan bewpro:skin --from-demo=insurance --primary=#0066CC --secondary=#003366

# Preview sin crear archivo
php artisan bewpro:skin --from-demo=construction --dry-run

# Archivo con nombre especifico
php artisan bewpro:skin --primary=#FF0000 --secondary=#000000 --output=skin-mi-marca.css
```

### Opciones

| Flag | Descripcion | Default |
|------|------------|---------|
| `--primary` | Color principal HEX | #0088CC |
| `--secondary` | Color secundario HEX | #E36159 |
| `--tertiary` | Color terciario HEX | #FFFFFF |
| `--quaternary` | Color cuaternario HEX | #383F48 |
| `--dark` | Color oscuro HEX | #212529 |
| `--light` | Color claro HEX | #FFFFFF |
| `--from-demo` | Usar colores de un demo como base | - |
| `--output` | Nombre del archivo de salida | skin-{proyecto}.css |
| `--dry-run` | Mostrar CSS sin escribir archivo | false |

### Donde se guarda

```
public/template/css/skins/skin-{nombre}.css
```

El sistema carga el skin via `get_theme_skin()` que lee de `cd-system.theme.skin` en la DB. Si es `auto`, mapea el demo al skin default.

## Estructura interna del skin CSS

```css
/* General */
:root {
    --border-radius: 0;
    --border-radius2x: 16px;
    --default: #A0A0A0;
}

/* Skin Colors */
:root {
    /* Primary */
    --primary: #FFBF00;           /* Color base */
    --primary-100: #E6AC00;       /* 10% mas oscuro */
    --primary-200: #D9A200;       /* 15% mas oscuro */
    --primary-300: #CC9900;       /* 20% mas oscuro */
    --primary--100: #FFD200;      /* 10% mas claro */
    --primary--200: #FFDC00;      /* 15% mas claro */
    --primary--300: #FFE500;      /* 20% mas claro */
    --primary-rgba-0: rgba(255, 191, 0, 0);    /* Transparente */
    --primary-rgba-10: rgba(255, 191, 0, 0.1); /* 10% opacidad */
    ...
    --primary-rgba-90: rgba(255, 191, 0, 0.9); /* 90% opacidad */

    /* Secondary, Tertiary, Quaternary, Dark, Light — misma estructura */
}

/* Inverse (texto sobre fondo del color) */
:root {
    --primary-inverse: #1A1A1A;   /* Texto oscuro sobre fondo primary claro */
    --secondary-inverse: #FFF;    /* Texto claro sobre fondo secondary oscuro */
    ...
}

/* Grey Scale */
:root {
    --grey: #969696;
    --grey-100: #2A2A2A;
    ...
    --grey-1000: #999999;
}
```

## Consideraciones para demos dark vs light

**Demos light mode** (construction, real-estate, restaurant, insurance):
- `--dark` es el color de texto (oscuro)
- `--light` es el color de fondo (blanco)
- `--secondary` puede ser un color de acento

**Demos dark mode** (accounting-1, accounting-2, digital-agency-2, business-consulting):
- `--secondary` o `--dark` es el fondo oscuro
- `--primary` es el acento que resalta sobre el fondo oscuro
- El demo CSS tiene global overrides que remapean clases de Porto

Al elegir colores para un proyecto, considerar si el demo es dark o light para que los colores funcionen correctamente en el contexto visual.