# Estándares - UI/UX Diseño Executive Suite / Kinetix

Este documento establece la guía de estilos visuales e interactivos de la intranet corporativa Kinetix, adaptada al **Executive Suite Design System**.

---

## 1. Paleta de Colores (Diseño Elegante y Sofisticado)
El diseño evoluciona de un fondo oscuro a una combinación de fondos claros premium (Ivory/Blanco cálido) con tarjetas oscuras sofisticadas en tonos joya y acentos dorados/índigo.

### Fondo y Superficies (Light Mode)
- **Fondo Principal (Ivory):** `#F5F4F1`
- **Superficie Principal (White):** `#FFFFFF`
- **Superficie Secundaria (Warm Grey):** `#F0EEE9`

### Tarjetas Joya (Blackjack System)
Tarjetas de fondo oscuro profundo utilizadas para resaltar elementos clave:
- **Azul Marino (Navy):** `#0D1B2A`
- **Ciruela (Plum):** `#1A0E2E`
- **Verde Viridian (Forest):** `#0A2520`
- **Marrón Ébano (Espresso):** `#1C0E08`

### Acentos de Lujo y Elegancia
- **Oro Antiguo (Gold Luxe):** `#C9973C` (utilizado para botones primarios, bordes y foco)
- **Índigo Profundo (Indigo Rich):** `#3730A3` (acentos interactivos y botones secundarios)
- **Zafiro (Sapphire):** `#1E3A8A`
- **Esmeralda Profundo (Emerald Deep):** `#065F46`

---

## 2. Componentes y Efecto Glassmorphism
El efecto de cristal se adapta para ofrecer limpieza y legibilidad sobre el fondo claro, utilizando bordes sutiles y sombras suaves.

```css
.glass-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  box-shadow:
    0 1px 3px rgba(15, 13, 10, 0.06),
    0 8px 24px rgba(15, 13, 10, 0.06);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
```

### Tarjetas Blackjack (`.card-blackjack`)
Tienen un borde interno fino, un leve zoom al pasar el cursor y sombras tridimensionales al ser interactivas:
```css
.card-blackjack {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
```

---

## 3. Botones, Entradas e Interactividad
- **Botón Primario (Gold):** Gradiente de oro (`#C9973C` a `#A67C28`) con sombras proyectadas.
- **Botón Secundario (Indigo):** Sólido índigo (`#3730A3`) para acciones de flujo secundario.
- **Entradas Luxe (`.input-luxe`):** Bordes completamente redondeados, foco en color oro con un anillo suave de resplandor.
- **Micro-animaciones:** Todas las transiciones de tarjetas, botones y campos interactivos deben durar entre `0.2s` y `0.35s` con curvas suavizadas (`ease` o `cubic-bezier`).
- **Tipografía Premium:** Títulos en fuente **Inter** (peso de 900 para máxima jerarquía) y texto de cuerpo en **Outfit** para asegurar elegancia y alta legibilidad.