/* ==========================================================================
   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 */

  /* — 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:     #ececec;
  --gm-primary-hi:  #ffffff;
  --gm-primary-ink: #0d0d0d;

  /* — 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;

  /* — 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 */
}