/* ============================================================
   Girasol.pe — Línea gráfica / sistema de marca
   Fuente única de tokens de color, forma y tipografía.
   Incluir en cualquier página:  <link rel="stylesheet" href="css/brand.css">
   (ajustar la ruta relativa según la profundidad del archivo)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  /* Principales */
  --gs-blue: #008BCE;  --gs-navy: #0A2F5A;  --gs-white: #FAFAFA;
  /* Escala azul/navy */
  --gs-blue-600: #0072AB; --gs-blue-700: #005A87;
  --gs-navy-600: #0F4787; --gs-navy-800: #0B2444; --gs-gray: #ADADAD;
  /* Superficies */
  --gs-bg: #F5F7FB; --gs-surface: #FFFFFF; --gs-surface-alt: #F8FAFD;
  /* Bordes */
  --gs-border: #E6EBF2; --gs-border-soft: #EEF1F6;
  /* Texto — los "muted" cumplen WCAG AA (>=4.5:1 sobre superficie clara).
     Antes: #8A99AD = 2.9:1, ilegible para muchos usuarios. Ahora 5.0:1. */
  --gs-text: #16324F; --gs-text-body: #3A506B; --gs-text-muted: #5F7186;
  /* Estados */
  --gs-blue-tint: rgba(0,139,206,.10);
  --gs-ok: #1F9D55;   --gs-ok-tint: rgba(31,157,85,.12);
  --gs-warn: #B8860B; --gs-warn-tint: #FFF3CD;
  --gs-danger: #E3342F; --gs-danger-tint: rgba(227,52,47,.10);
  /* Sidebar claro */
  --gs-side-bg: #FFFFFF; --gs-side-text: #1E2A3A; --gs-side-muted: #5F7488;  /* 4.8:1 (antes #97A3B4 = 2.5:1) */
  --gs-side-icon: #6B7A8F; --gs-side-active: #008BCE; --gs-side-active-bg: #EAF4FB;
  --gs-side-hover-bg: #F2F5F9; --gs-side-border: #EDF0F5;
  /* Forma */
  --gs-radius: 14px; --gs-radius-sm: 8px;
  --gs-shadow: 0 4px 16px rgba(10,47,90,.06);
  --gs-shadow-lg: 0 8px 24px rgba(10,47,90,.10);
  /* Tipografía */
  --gs-font-heading: 'Inter','Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --gs-font-body: 'Inter','Source Sans Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* ---- Clases utilitarias de marca (opcionales) ---- */
.gs-bg        { background: var(--gs-bg); }
.gs-surface   { background: var(--gs-surface); border:1px solid var(--gs-border); border-radius: var(--gs-radius); box-shadow: var(--gs-shadow); }
.gs-title     { font-family: var(--gs-font-heading); color: var(--gs-navy); font-weight: 700; }
.gs-text      { font-family: var(--gs-font-body); color: var(--gs-text-body); }

.gs-btn {
  font-family: var(--gs-font-body); font-weight: 600;
  background: var(--gs-blue); color:#fff; border:0;
  border-radius: var(--gs-radius-sm); padding: 10px 18px; cursor: pointer;
  transition: background .18s ease;
}
.gs-btn:hover { background: var(--gs-blue-600); }
.gs-btn:active { background: var(--gs-blue-700); }

.gs-badge-ok     { color: var(--gs-ok);     background: var(--gs-ok-tint);     border-radius: var(--gs-radius-sm); padding:2px 8px; }
.gs-badge-warn   { color: var(--gs-warn);   background: var(--gs-warn-tint);   border-radius: var(--gs-radius-sm); padding:2px 8px; }
.gs-badge-danger { color: var(--gs-danger); background: var(--gs-danger-tint); border-radius: var(--gs-radius-sm); padding:2px 8px; }