/* ============================================================================
   ASTRO — UI System · Design Tokens (FUENTE DE LA VERDAD)
   Portal 360 — portal de agente. Tema CLARO (marca blanca ASTRO).
   Regla: en componentes NUNCA usar hex crudos, siempre var(--token).
   Extraído del Figma "ASTRO - UI SISTEM".
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- Marca */
  --brand-primary:        #003cff; /* Azul eléctrico — acción primaria     */
  --brand-primary-active: #0037b2; /* Azul presionado                       */
  --brand-navy:           #002850; /* Navy — texto y superficies oscuras    */
  --brand-navy-deep:      #001c33; /* Navy profundo — sidebar/nav           */
  --brand-accent:         #f58c00; /* Naranja — acento                      */

  /* Gradiente primario (botones/headers) */
  --grad-primary: linear-gradient(180deg, #005cff 0%, #003cff 55%, #0037b2 100%);
  --grad-header:  linear-gradient(135deg, #000f19 0%, #003cff 55%, #4209c1 100%);

  /* --------------------------------------------------------------- Texto */
  --text-primary:   #002850; /* Navy                                        */
  --text-secondary: #4a515e;
  --text-tertiary:  #6b7484;
  --text-disabled:  #9aa3b2;
  --text-inverse:   #ffffff;

  /* -------------------------------------------------- Fondos y superficies */
  --bg-default: #f7f8fa; /* Fondo de página                                 */
  --bg-surface: #ffffff; /* Tarjetas, paneles                               */
  --bg-sunken:  #eef0f4; /* Zonas hundidas / hover secundario               */
  --bg-blue-50: #eaf0ff; /* Azul muy suave (fills sutiles)                  */

  /* ------------------------------------------------------------- Bordes */
  --border-subtle: #e2e5eb;
  --border-default: #cbd0da;
  --border-strong: #9aa3b2;

  /* --------------------------------------------------------- Feedback */
  --success:   #16a34a;
  --error:     #dc2626;
  --error-active: #991b1b;
  --error-bg:  #fee2e2;
  --error-text: #991b1b;
  --warning:   #f58c00;

  /* -------------------------------- Píldoras de estado (fondo / texto) */
  --pill-active-bg:  #e1f1ff;  --pill-active-tx:  #00497f;
  --pill-pending-bg: #fef3c7;  --pill-pending-tx: #92400e;
  --pill-done-bg:    #dcfce7;  --pill-done-tx:    #166534;
  --pill-urgent-bg:  #fee2e2;  --pill-urgent-tx:  #991b1b;
  --pill-draft-bg:   #eef0f4;  --pill-draft-tx:   #4a515e;

  /* --------------------------------------------------------- Focus ring */
  --focus-ring: 0 0 0 2px var(--bg-surface), 0 0 0 4px var(--brand-primary);

  /* -------------------------------------------------------- Tipografía */
  --font-head: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Escala tipográfica (px → rem sobre base 16) */
  --fs-display: 1.625rem; /* 26px H1                                        */
  --fs-h2:      1.5rem;   /* 24px                                           */
  --fs-h3:      1.25rem;  /* 20px                                           */
  --fs-title:   1.0625rem;/* 17px título card                               */
  --fs-strong:  0.9375rem;/* 15px body fuerte                               */
  --fs-body:    0.8125rem;/* 13px cuerpo                                    */
  --fs-caption: 0.75rem;  /* 12px meta/caption                              */
  --fs-overline:0.625rem; /* 10px overline                                  */
  --fs-btn-lg:  1.125rem; /* 18px                                           */
  --fs-btn-md:  1rem;     /* 16px                                           */
  --fs-btn-sm:  0.875rem; /* 14px                                           */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;

  /* ----------------------------------------------------- Espaciado (4px) */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.25rem;  /* 20 */
  --space-6: 1.5rem;   /* 24 */
  --space-7: 1.75rem;  /* 28 */
  --space-10: 2.5rem;  /* 40 */
  --space-14: 3.5rem;  /* 56 */

  /* --------------------------------------------------------- Radios */
  --radius-badge: 6px;
  --radius-banner: 10px;
  --radius-md: 12px;   /* cards / inputs                                    */
  --radius-lg: 14px;   /* list-item / avatar cuadrado                       */
  --radius-panel: 16px;
  --radius-header: 28px;
  --radius-full: 9999px;

  /* --------------------------------------------------------- Sombras */
  --shadow-sm: 0 2px 8px rgba(0, 15, 25, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 15, 25, 0.10);
  --shadow-xl: 0 16px 40px rgba(0, 15, 25, 0.14);
  --shadow-btn: 0 5px 7px rgba(0, 60, 255, 0.26);

  /* --------------------------------------------------------- Transiciones */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* --------------------------------------------------------- Layout */
  --sidebar-w: 264px;
  --sidebar-w-collapsed: 76px;
  --topbar-h: 60px;
  --content-max: 1440px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}