/* ============================================
   FGS · Rede Agrometeorolóxica · Tokens de deseño
   Fonte: ~/Sites/fgs-web/web/assets/css/tokens.css (fonte de verdade da marca).
   As cores de aquí abaixo son unha copia fiel dos valores --gs-* oficiais;
   calquera discrepancia futura con tokens.css débese corrixir aquí, nunca
   inventar unha variante propia.
   ============================================ */

:root {
  /* ----- CORES (idénticas a tokens.css da web institucional) ----- */
  --gs-verde-nato:       #4a5846;
  --gs-verde-nato-50:    rgba(74, 88, 70, 0.08);
  --gs-verde-nato-90:    rgba(74, 88, 70, 0.92);
  --gs-verde-claro:      #6B8F47;
  --gs-verde-moi-claro:  #E8EFE3;

  --gs-branco:           #FFFFFF;
  --gs-gris-05:          #FAFAF7;
  --gs-gris-10:          #F5F5F0;
  --gs-gris-20:          #E8E8E2;
  --gs-gris-50:          #6C6C64;
  --gs-gris-80:          #3E3E38;
  --gs-negro:            #1A1A17;

  --gs-terra:            #8B5E3C;
  --gs-azul:             #2E6B8A;
  --gs-viola:            #6B4C8A;
  --gs-oliva:            #7A7A2E;

  --gs-exito:            #4A7C59;
  --gs-aviso:            #C8872B;
  --gs-erro:             #A64040;

  /* ----- TIPOGRAFÍA (idéntica a tokens.css) ----- */
  --gs-font-display:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --gs-font-titulos:  'Trebuchet MS', 'Trebuchet', Arial, sans-serif;
  --gs-font-corpo:    'Lato', system-ui, -apple-system, sans-serif;

  --gs-texto-xs:    0.75rem;
  --gs-texto-sm:    0.875rem;
  --gs-texto-base:  1rem;
  --gs-texto-lg:    1.125rem;
  --gs-texto-xl:    1.375rem;
  --gs-texto-2xl:   1.75rem;
  --gs-texto-3xl:   2.25rem;
  --gs-texto-4xl:   3rem;
  --gs-texto-5xl:   clamp(2.75rem, 6vw, 4.5rem);
  --gs-texto-6xl:   clamp(3.5rem, 8vw, 6.5rem);

  --gs-peso-light:    300;
  --gs-peso-regular:  400;
  --gs-peso-medium:   500;
  --gs-peso-bold:     700;
  --gs-peso-black:    900;

  /* ----- LAYOUT ----- */
  --gs-max-width:        1200px;
  --gs-max-width-medio:  960px;
  --gs-max-width-texto:  680px;
  --gs-padding-x:        clamp(1.25rem, 5vw, 3.5rem);

  --gs-gap-xs:   0.5rem;
  --gs-gap-sm:   0.75rem;
  --gs-gap-md:   1.5rem;
  --gs-gap-lg:   3rem;
  --gs-gap-xl:   5rem;
  --gs-gap-2xl:  8rem;

  --gs-radius:        4px;
  --gs-radius-card:   8px;
  --gs-radius-pill:   999px;

  --gs-sombra-sm:  0 1px 3px rgba(26, 26, 23, 0.06);
  --gs-sombra-md:  0 4px 16px rgba(26, 26, 23, 0.08);
  --gs-sombra-lg:  0 12px 32px rgba(26, 26, 23, 0.10);

  --gs-transicion-rapida:  150ms ease;
  --gs-transicion-media:   250ms ease;
  --gs-transicion-lenta:   400ms ease;
}

/* ============================================
   Variante escura FGS para paneis de datos en directo
   ------------------------------------------------
   A Rede Agrometeorolóxica amosa datos en vivo (mapas, gráficas,
   avisos) e un fondo escuro reduce a fatiga visual e fai resaltar
   as cores de estado. Esta variante NON inventa cores novas: cada
   valor constrúese con color-mix() a partir dos tokens --gs-*
   oficiais de enriba. Proponse como variante formal do sistema de
   deseño FGS para paneis de datos; pendente de validar coa web
   institucional se se quere adoptar noutros proxectos.
   Actívase engadindo data-theme="dark" no <html>.
   ============================================ */
:root[data-theme="dark"] {
  --gs-bg:             var(--gs-negro);
  --gs-bg-elevated:    color-mix(in srgb, var(--gs-negro) 88%, var(--gs-verde-nato) 12%);
  --gs-bg-section:     color-mix(in srgb, var(--gs-negro) 95%, var(--gs-verde-nato) 5%);
  --gs-bg-topbar:      color-mix(in srgb, var(--gs-negro) 97%, black 3%);

  --gs-borde:          color-mix(in srgb, var(--gs-verde-claro) 20%, transparent);
  --gs-borde-forte:    color-mix(in srgb, var(--gs-verde-claro) 35%, transparent);

  --gs-texto:          var(--gs-verde-moi-claro);
  --gs-texto-60:       color-mix(in srgb, var(--gs-verde-moi-claro) 60%, transparent);
  --gs-texto-40:       color-mix(in srgb, var(--gs-verde-moi-claro) 40%, transparent);
  --gs-texto-28:       color-mix(in srgb, var(--gs-verde-moi-claro) 28%, transparent);
  --gs-texto-12:       color-mix(in srgb, var(--gs-verde-moi-claro) 12%, transparent);

  --gs-acento:         var(--gs-verde-claro);
  --gs-acento-forte:   color-mix(in srgb, var(--gs-verde-claro) 75%, white 25%);

  /* Estados, aclarados para manter contraste AA sobre fondo escuro */
  --gs-exito-d:  color-mix(in srgb, var(--gs-exito) 70%, white 30%);
  --gs-aviso-d:  color-mix(in srgb, var(--gs-aviso) 65%, white 35%);
  --gs-erro-d:   color-mix(in srgb, var(--gs-erro)  65%, white 35%);
  --gs-azul-d:   color-mix(in srgb, var(--gs-azul)  60%, white 40%);

  /* Niveis de aviso agronómico (4 chanzos, usados en badges/alertas) */
  --gs-nivel1-bg: color-mix(in srgb, var(--gs-exito) 15%, transparent);
  --gs-nivel1-bd: color-mix(in srgb, var(--gs-exito) 30%, transparent);
  --gs-nivel1-t:  var(--gs-exito-d);

  --gs-nivel2-bg: color-mix(in srgb, var(--gs-aviso) 10%, transparent);
  --gs-nivel2-bd: color-mix(in srgb, var(--gs-aviso) 25%, transparent);
  --gs-nivel2-t:  var(--gs-aviso-d);

  --gs-nivel3-bg: color-mix(in srgb, var(--gs-terra) 12%, transparent);
  --gs-nivel3-bd: color-mix(in srgb, var(--gs-terra) 28%, transparent);
  --gs-nivel3-t:  color-mix(in srgb, var(--gs-terra) 65%, white 35%);

  --gs-nivel4-bg: color-mix(in srgb, var(--gs-erro) 12%, transparent);
  --gs-nivel4-bd: color-mix(in srgb, var(--gs-erro) 28%, transparent);
  --gs-nivel4-t:  var(--gs-erro-d);
}