/* ====================================================================
   VARIABLES.CSS — THINKCHIP
   Importación de fuentes, Custom Properties globales y etiquetas de marca.
   Carga antes que cualquier otro archivo CSS.
==================================================================== */

/* ====================================================================
   0.0 - IMPORTACIÓN DE FUENTES
==================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@500;600;700;800&display=swap');

/* ====================================================================
   1.0 - CONFIGURACIÓN GLOBAL (VARIABLES)
==================================================================== */
:root {
   /* ===== FOUNDATION (60%) — Off-White Surface ===== */
   --gris-900: #f2f0eb;
   /* página background */
   --gris-800: #f2f0eb;
   /* superficie / cards */
   --gris-700: #E7E5E4;
   /* borde suave */
   --gris-600: #D6D3D1;
   /* borde medio */
   --gris-500: #A8A29E;
   /* texto muted */
   --gris-400: #57534E;
   /* texto secundario */
   --gris-300: #374151;
   /* texto body principal */
   --gris-200: #111827;
   /* títulos profundos */

   /* ===== BRAND (30%) — Deep Forest Green ===== */
   --color-brand: #1A433B;
   --color-brand-oscuro: #0F2822;
   --color-brand-claro: #2D6A5E;
   --color-brand-sage: #A3B18A;
   --color-brand-sage-claro: #E8F0E0;

   /* ===== CTA (10%) — Vibrant Emerald Green (Sustituye al Naranja) ===== */
   --color-acento: #059669;
   --color-acento-hover: #047857;
   --color-acento-claro: #D1FAE5;
   --color-alerta: #10B981;

   /* ===== Etiquetas adaptadas al tema claro ===== */
   --color-etiqueta-pro: #5B21B6;
   --color-etiqueta-inteligente: #166534;
   --color-etiqueta-unico: #1E40AF;
   --color-etiqueta-popular: #059669;
   --color-etiqueta-partida: #57534E;

   /* ===== Semánticos (mapeo de paleta) ===== */
   --color-fondo: var(--gris-900);
   --color-superficie: var(--gris-800);
   --color-borde: var(--gris-700);
   --color-texto-principal: var(--gris-300);
   --color-texto-secundario: var(--gris-400);

    /* ===== Tipografía ===== */
    --fuente-principal: 'Inter', sans-serif;
    --fuente-titulos: 'Plus Jakarta Sans', sans-serif;
    --fuente-display: 'Plus Jakarta Sans', sans-serif;
    --fuente-logos: 'Plus Jakarta Sans', sans-serif;
    
    /* Nuevas tipografías para el rediseño editorial */
    --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-serif: 'Inter', sans-serif;

   /* ===== Marcas (sin cambio) ===== */
   --color-marca-apple: hsl(45, 56%, 52%);
   --color-marca-samsung: hsl(217, 96%, 53%);
   --color-marca-beats: hsl(170, 100%, 35%);
   /* Ajustado a verde para coherencia si se desea, o mantenido si es logo */
   --color-marca-google-blue: #4285F4;
   --color-marca-google-red: #EA4335;
   --color-marca-google-yellow: #FBBC05;
   --color-marca-google-green: #34A853;

   /* ===== Funcionales ===== */
   --color-exito: #16A34A;
   --color-error: #DC2626;

   /* ===== Ecosistema Beats (Ajuste a paleta Sage/Verde) ===== */
   --color-beats-oscuro: #0F2822;
   --color-beats-lila: #E8F0E0;
   --color-beats-cian: #10B981;
   --color-beats-cian-oscuro: #064E3B;
   --color-beats-morado: #1A433B;
   --color-beats-magenta: #059669;

   /* ===== Mapeo Legacy (Para no romper componentes existentes) ===== */
   --bg: var(--gris-900);
   --bg-2: var(--color-brand-sage-claro);
   --text: var(--gris-300);
   --muted: var(--gris-400);
   --card: var(--gris-800);
   --border: var(--gris-700);
   --shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
   --brand: var(--color-brand);
   --ok: var(--color-exito);
   --warn: var(--color-acento);
   --danger: var(--color-error);
   --r: 16px;
   --gap: 1.2rem;

   /* Samsung Prism Palette (Mantenida por especificado) */
   --color-marca-samsung-prism: #0c4da2;
   --color-marca-samsung-glow: rgba(12, 77, 162, 0.4);
   --color-marca-samsung-deep: #030d1a;

   /* Xiaomi Official Orange Palette */
   --color-marca-xiaomi-industrial: #FF6700;
   --color-marca-xiaomi-glow: rgba(255, 103, 0, 0.1);
   --color-marca-xiaomi-vibrant: #FF8F44;

   /* Beats Premium Palette */
   --color-marca-beats-red: #eb2e37;
   --color-marca-beats-glow: rgba(235, 46, 55, 0.15);
   --color-marca-beats-deep: #0f0203;

   /* Sony Navy Palette */
   --color-marca-sony-navy: #003087;
   --color-marca-sony-deep: #002060;
   --color-marca-sony-glow: rgba(0, 48, 135, 0.18);
}

/* ====================================================================
   1.0.1 - Clases de Etiqueta de Marca
==================================================================== */
.etiqueta--pro {
   color: var(--color-etiqueta-pro);
   border-color: var(--color-etiqueta-pro);
}

.etiqueta--inteligente {
   color: var(--color-etiqueta-inteligente);
   border-color: var(--color-etiqueta-inteligente);
}

.etiqueta--unico {
   color: var(--color-etiqueta-unico);
   border-color: var(--color-etiqueta-unico);
}

.etiqueta--popular {
   color: var(--color-etiqueta-popular);
   border-color: var(--color-etiqueta-popular);
}

.etiqueta--partida {
   color: var(--color-etiqueta-partida);
   border-color: var(--color-etiqueta-partida);
}

.etiqueta {
   border-radius: 4px;
   padding: 4px 10px;
   border: 1px solid;
   font-family: 'Montserrat', sans-serif;
   font-weight: 600;
   font-size: 0.65rem;
   letter-spacing: 1px;
   text-transform: uppercase;
   line-height: 1.3;
   background-color: rgba(255, 255, 255, 0.85);
   color: currentColor;
}