/* ==========================================================================
   Gourmedia · tokens del design system
   Fuente única de verdad de color, tipografía, radios y motion del panel.
   Se carga en todas las páginas para que cualquier plantilla pueda usarlos;
   no imprime ninguna regla visual por sí sola.
   ========================================================================== */

:root {
  /* — superficies — */
  --gm-bg:             #0a0a0a;  /* fondo base */
  --gm-surface:        #171717;  /* selects, inputs, tarjetas, filas, diálogos */
  --gm-surface-hi:     #1f1f1f;  /* hover sobre superficie */
  --gm-surface-active: #212121;  /* item de navegación activo */
  --gm-raised:         #262626;  /* botones y controles elevados */
  --gm-raised-hi:      #303030;  /* hover de botón */

  /* — campos de búsqueda y entrada —
     Un escalón por encima de la superficie: el campo donde se escribe se
     distingue del select que solo se despliega. */
  --gm-field:        #212121;
  --gm-field-border: #424242;
  --gm-field-text:   #ffffff;
  --gm-field-ph:     #afafaf;

  /* — la acción principal —
     Un único blanco. Sirve para la acción que cierra una tarea (Guardar,
     Confirmar): hay como mucho una por pantalla, así que no compite con nada.
     La jerarquía completa es: select (surface) < botón (raised) < principal. */
  --gm-primary:     #f9f9f9;
  --gm-primary-hi:  #ffffff;
  --gm-primary-ink: #0a0a0a;

  /* — bordes — */
  --gm-border:      #2f2f2f;  /* el borde de 1px, en todo lo que tenga contorno */
  --gm-border-soft: #232323;  /* divisiones internas de una tarjeta */
  --gm-border-hi:   #3d3d3d;  /* borde en hover */
  --gm-border-dim:  #1e1e1e;  /* separadores verticales de toolbar */

  /* — cristal — */
  --gm-glass:      rgba(23, 23, 23, .72);
  --gm-glass-blur: blur(20px) saturate(140%);
  --gm-scrim:      rgba(0, 0, 0, .62);

  /* — texto — */
  --gm-text:   #ececec;
  --gm-text-2: #afafaf;  /* etiquetas de grupo, texto secundario */
  --gm-text-3: #7c7c7c;  /* metadatos */
  --gm-text-4: #5a5a5a;  /* placeholder, deshabilitado */

  /* — color de interacción —
     El panel es escala de grises. Lo único cromático es el switch encendido,
     con los valores que ya usaba assets/css/switchify.css. */
  --gm-switch-on:    #2997ff;
  --gm-switch-stock: #ff680f;

  /* — semánticos: informan de un estado, nunca decoran — */
  --gm-ok:    #34d399;  --gm-ok-bg:   rgba(52, 211, 153, .12);
  --gm-warn:  #fbbf24;  --gm-warn-bg: rgba(251, 191, 36, .12);
  --gm-bad:   #f87171;  --gm-bad-bg:  rgba(248, 113, 113, .12);
  --gm-info:  #3b82f6;

  /* — distintivos —
     Cada tipo de cosa tiene su tinta. El principio es siempre el mismo: un
     fondo casi negro teñido con el matiz, y borde y texto en el matiz vivo.
     Para añadir uno nuevo se copia el par; no hace falta tocar nada más. */
  --gm-tag-pink-bg:   #21181f;  --gm-tag-pink-fg:   #c14fb3;  /* Banner */
  --gm-tag-amber-bg:  #241e17;  --gm-tag-amber-fg:  #e4a129;  /* Registro */
  --gm-tag-violet-bg: #1c1a24;  --gm-tag-violet-fg: #9a7ff0;  /* Pop-up */
  --gm-tag-teal-bg:   #14201f;  --gm-tag-teal-fg:   #3fb8a5;  /* Etiqueta */
  --gm-tag-blue-bg:   #161d26;  --gm-tag-blue-fg:   #4f9ad4;  /* Pantalla */
  --gm-tag-lime-bg:   #1a1f16;  --gm-tag-lime-fg:   #8bbf49;  /* Activo */
  --gm-tag-rose-bg:   #241719;  --gm-tag-rose-fg:   #d95f6b;  /* Caducado */
  --gm-tag-green-bg:  #16211a;  --gm-tag-green-fg:  #4fbf7f;  /* Plan contratado */
  --gm-tag-gray-bg:   #1c1c1c;  --gm-tag-gray-fg:   #9a9a9a;  /* Neutro */

  /* — radios: crecen con la superficie — */
  --gm-r-sm:   7px;   /* controles pequeños */
  --gm-r-md:   10px;  /* campos y botones */
  --gm-r-lg:   14px;  /* tarjetas y filas */
  --gm-r-xl:   18px;  /* diálogos */
  --gm-r-pill: 999px;

  /* — sombras — */
  --gm-sh-pop:  0 16px 48px -12px rgba(0, 0, 0, .72), 0 2px 8px rgba(0, 0, 0, .4);
  --gm-sh-menu: 0 12px 32px -8px rgba(0, 0, 0, .68);

  /* — tipografía — */
  --gm-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --gm-font-disp: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --gm-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — motion: nada supera los 200 ms — */
  --gm-ease:   cubic-bezier(.22, .61, .36, 1);
  --gm-t-fast: 110ms var(--gm-ease);
  --gm-t:      160ms var(--gm-ease);

  /* — métrica del shell — */
  --gm-rail:  264px;  /* ancho del pilar de navegación */
  --gm-boxed: 1180px; /* ancho máximo del contenido */
}