/* ============================================================
   publico/estilos/variables.css
   Paleta oficial Casa Perú Valencia 2026
   Acogida · Creatividad · Confianza
   ============================================================ */

:root {
  /* ── Naranja CPV — Acogida / Creatividad ──────────────────── */
  --primario:     #bd1e1e;   /* rojo institucional */
  --primario-dk:  #9f1717;   /* rojo profundo / hover */
  --primario-lt:  #ffeded;   /* rojo claro / fondos */
  --primario-rgb: 189, 30, 30;

  /* ── Rojo CPV — Confianza / Énfasis ──────────────────────── */
  --rojo:         #e02412;   /* rojo vivo */
  --rojo-dk:      #bd1e1e;   /* rojo oscuro */
  --rojo-lt:      #ffeded;   /* rojo claro / fondos */
  --rojo-rgb:     224, 36, 18;

  --naranja:      #f08136;
  --naranja-dk:   #ea622a;
  --naranja-lt:   #fff0e7;

  /* ── Amarillo CPV — Creatividad / Destacado ──────────────── */
  --acento:       #ffc24a;   /* ámbar */
  --acento-lt:    #ffde59;   /* amarillo claro */
  --acento-fondo: #fff5cc;   /* fondo amarillo muy suave */

  /* ── Superficies — crema de marca ────────────────────────── */
  --fondo:        #fdf8f0;   /* crema cálida CPV */
  --blanco:       #ffffff;
  --superficie-2: #fff6f3;   /* crema rosada muy suave */

  /* ── Texto ────────────────────────────────────────────────── */
  --texto:          #1c1917;
  --texto-suave:    #78716c;
  --texto-muy-suave: #a8a29e;

  /* ── Bordes ───────────────────────────────────────────────── */
  --borde:        #ead8d4;
  --borde-fuerte: #d6bcb7;

  /* ── Estados semánticos (usan colores CPV) ────────────────── */
  --exito:        #16a34a;
  --exito-bg:     #f0fdf4;
  --exito-borde:  #86efac;

  --error:        var(--rojo);
  --error-bg:     var(--rojo-lt);
  --error-borde:  #f5a9a9;

  --aviso:        #9a6700;
  --aviso-bg:     var(--acento-fondo);
  --aviso-borde:  var(--acento-lt);

  --info:         #0369a1;
  --info-bg:      #f0f9ff;
  --info-borde:   #bae6fd;

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-w: 240px;
  --sidebar-collapsed-w: 82px;
  --navbar-h:  60px;

  /* ── Forma ────────────────────────────────────────────────── */
  --radio-sm: 4px;
  --radio:    7px;
  --radio-lg: 10px;
  --radio-xl: 14px;

  /* ── Sombras cálidas ──────────────────────────────────────── */
  --sombra-sm: 0 1px 3px rgba(92, 22, 18, 0.06);
  --sombra:    0 4px 16px rgba(92, 22, 18, 0.08);
  --sombra-lg: 0 8px 32px rgba(92, 22, 18, 0.12);

  /* ── Tipografía ───────────────────────────────────────────── */
  --fuente:      "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fuente-mono: "Fira Code", "Cascadia Code", monospace;

  /* ── Transiciones ─────────────────────────────────────────── */
  --transicion:    0.15s ease;
  --transicion-md: 0.25s ease;
}

/* ── Modo oscuro ──────────────────────────────────────────── */
:root[data-theme="dark"] {
  --fondo:        #121214;
  --blanco:       #1c1c20;
  --superficie-2: #25252b;
  --texto:        #f8fafc;
  --texto-suave:  #cbd5e1;
  --texto-muy-suave: #94a3b8;
  --borde:        #383842;
  --borde-fuerte: #4b4b57;
  --primario:     #ff6b5f;
  --primario-dk:  #ff4e42;
  --primario-lt:  #3a1b20;
  --rojo-lt:      #3a1b20;
  --aviso:        #ffde59;
  --acento-fondo: #332a12;
  --aviso-borde:  #7a6118;
  --info:         #7dd3fc;
  --info-bg:      #18212a;
  --info-borde:   #334155;
  --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.34);
  --sombra:    0 4px 16px rgba(0, 0, 0, 0.42);
  --sombra-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --fondo:        #121214;
    --blanco:       #1c1c20;
    --superficie-2: #25252b;
    --texto:        #f8fafc;
    --texto-suave:  #cbd5e1;
    --texto-muy-suave: #94a3b8;
    --borde:        #383842;
    --borde-fuerte: #4b4b57;
    --primario:     #ff6b5f;
    --primario-dk:  #ff4e42;
    --primario-lt:  #3a1b20;
    --rojo-lt:      #3a1b20;
    --aviso:        #ffde59;
    --acento-fondo: #332a12;
    --aviso-borde:  #7a6118;
    --info:         #7dd3fc;
    --info-bg:      #18212a;
    --info-borde:   #334155;
    --sombra-sm: 0 1px 3px rgba(0, 0, 0, 0.34);
    --sombra:    0 4px 16px rgba(0, 0, 0, 0.42);
    --sombra-lg: 0 8px 32px rgba(0, 0, 0, 0.55);
  }
}