/**
 * Coffee Crew - Paleta oficial y tokens de diseño
 * Base: #3B2914 | Acento: #D4A017 | Secundario: #1F3A3D | Fondo: #F3EFEA | Texto: #1C1C1C
 *
 * @package CoffeeCrew
 */

:root {
    /* === Paleta oficial === */
    --cc-base: #3B2914;
    --cc-accent: #D4A017;
    --cc-secondary: #1F3A3D;
    --cc-bg: #F3EFEA;
    --cc-text: #1C1C1C;

    /* === Superficies y bordes === */
    --cc-surface: #ffffff;
    --cc-surface-alt: #F3EFEA;
    --cc-border: rgba(59, 41, 20, 0.15);
    --cc-border-light: rgba(59, 41, 20, 0.08);

    /* === Aliases semánticos (mapeados a paleta) === */
    --cc-primary: var(--cc-accent);
    --cc-heading: var(--cc-base);
    --cc-brand: var(--cc-base);

    /* === Estados - Acento === */
    --cc-accent-hover: #b8860b;
    --cc-accent-active: #9a7309;
    --cc-accent-text-on: var(--cc-text);

    /* === Estados - Secundario === */
    --cc-secondary-hover: #182a2c;
    --cc-secondary-active: #152526;
    --cc-secondary-text-on: #ffffff;

    /* === Estados - Base === */
    --cc-base-hover: #2d1f0f;
    --cc-base-text-on: #ffffff;

    /* === Focus y disabled === */
    --cc-focus-ring: 0 0 0 3px rgba(212, 160, 23, 0.35);
    --cc-focus-ring-offset: 2px;
    --cc-disabled-opacity: 0.6;

    /* === Alertas (mantienen legibilidad) === */
    --cc-success-bg: rgba(212, 160, 23, 0.12);
    --cc-success-border: var(--cc-accent);
    --cc-success-text: var(--cc-base);
    --cc-danger-bg: rgba(184, 38, 46, 0.1);
    --cc-danger-border: #b8262e;
    --cc-danger-text: #721c24;
    --cc-warning-bg: rgba(212, 160, 23, 0.15);
    --cc-warning-border: var(--cc-accent);
    --cc-warning-text: var(--cc-base);
    --cc-info-bg: rgba(31, 58, 61, 0.12);
    --cc-info-border: var(--cc-secondary);
    --cc-info-text: var(--cc-base);

    /* === Overlays y utilidad === */
    --cc-accent-muted: rgba(212, 160, 23, 0.2);
    --cc-base-overlay: rgba(255, 255, 255, 0.1);
    --cc-text-shadow-soft: 0 0 4px rgba(28, 28, 28, 0.25);
    --cc-danger-text-on: #ffffff;

    /* === Tipografía y sombras === */
    --cc-border-radius: 8px;
    --cc-border-radius-lg: 12px;
    --cc-box-shadow: 0 2px 8px rgba(28, 28, 28, 0.08);
    --cc-box-shadow-hover: 0 4px 12px rgba(28, 28, 28, 0.12);
}