/* ============================================================
   MULTICOTIZADOR BTG — Design Tokens
   Fuente de verdad: extraídos del archivo Figma via MCP
   Archivo: Multicotizador-BTG_B (b2y1AZQMVWdA3s74WXSwZQ)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;900&family=Open+Sans:wght@400;600;700&display=swap');

:root {

  /* ── Tipografía ── */
  --font-display: 'Raleway', sans-serif;
  --font-body:    'Open Sans', sans-serif;

  /* ── Escala tipográfica — Desktop ── */
  --text-h1:      40px;
  --text-h2:      32px;
  --text-h3:      24px;
  --text-h4:      20px;
  --text-subtitle: 18px;
  --text-body-l:  16px;
  --text-body-m:  14px;
  --text-body-s:  13px;
  --text-caption: 12px;
  --text-xs:      11px;

  /* ── Colores — Sidebar / Header (dark shell) ── */
  --color-shell-bg:       #0c1a27;   /* fondo sidebar — confirmado Figma */
  --color-header-bg:      #080f17;   /* fondo header — levemente más oscuro */
  --color-shell-border:   #1e293b;   /* border-right sidebar — confirmado Figma */
  --color-accent:         #22d3ee;   /* cyan activo — confirmado Figma */
  --color-nav-inactive:   #94a3b8;   /* texto nav inactivo (slate-400) — Figma */
  --color-nav-active-bg:  rgba(255,255,255,0.10); /* bg ítem activo — Figma */
  --color-nav-divider:    rgba(255,255,255,0.05); /* separador bottom — Figma */

  /* ── Colores — Área de contenido ── */
  --color-bg-surface:   #f5f7f8;   /* fondo gris claro general */
  --color-bg-white:     #ffffff;
  --color-border:       #e2e8f0;   /* borders en content */
  --color-title:        #0c1a27;   /* headings principales */
  --color-body:         #334155;   /* texto párrafo / body */
  --color-muted:        #94a3b8;   /* textos secundarios, placeholders */
  --color-primary:      #0c1a27;   /* alias para botones primary */

  /* ── Colores semánticos ── */
  --color-success:      #1db87a;
  --color-success-bg:   rgba(29,184,122,0.10);
  --color-success-text: #0f6b46;
  --color-warning:      #f5a623;
  --color-warning-bg:   rgba(245,166,35,0.10);
  --color-warning-text: #8a5a00;
  --color-error:        #e84c3d;
  --color-error-bg:     rgba(232,76,61,0.10);
  --color-error-text:   #9b1e13;
  --color-info:         #22d3ee;
  --color-info-bg:      rgba(34,211,238,0.10);

  /* ── Espaciado (base 4px) ── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;

  /* ── Border radius ── */
  --radius-xs:      2px;
  --radius-sm:      4px;
  --radius-default: 8px;
  --radius-md:      12px;
  --radius-card:    16px;
  --radius-pill:    9999px;

  /* ── Sombras / Elevación ── */
  --shadow-sm: 0 1px 4px rgba(12,26,39,0.08);
  --shadow-md: 0 4px 16px rgba(12,26,39,0.12);
  --shadow-lg: 0 8px 32px rgba(12,26,39,0.18);
  --shadow-sidebar: 0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.10);

  /* ── Dimensiones de layout — CONFIRMADAS FIGMA ── */
  --width-sidebar:  256px;   /* ← Figma: exactamente 256px */
  --height-header:  104px;   /* ← Figma: 103.78px → redondeado 104px */

  /* ── Componentes ── */
  --height-btn:     40px;
  --height-btn-lg:  48px;
  --height-input:   40px;

  /* ── Transición default ── */
  --transition: all 0.15s ease;
}

/* ── Escala tipográfica — Mobile ── */
@media (max-width: 767px) {
  :root {
    --text-h1:      28px;
    --text-h2:      24px;
    --text-h3:      20px;
    --text-h4:      17px;
    --text-body-l:  15px;
    --text-body-m:  14px;
    --text-body-s:  13px;
    --text-caption: 11px;
    --height-btn:   44px;
    --height-input: 44px;
  }
}