/* =======================================================================
   GOURMET BITES v7.0 — TOKENS COMPARTIDOS
   Importado por todos los wireframes de Fase 0.
   Mantener sincronizado con 00-sistema.html.
   ======================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* COLOR — neutros fríos */
  --gb-neutral-0:   #ffffff;
  --gb-neutral-25:  #fbfbfd;
  --gb-neutral-50:  #f5f6f8;
  --gb-neutral-100: #eceef2;
  --gb-neutral-200: #dde1e8;
  --gb-neutral-300: #c4cad5;
  --gb-neutral-400: #9aa3b3;
  --gb-neutral-500: #6b7384;
  --gb-neutral-600: #4a5160;
  --gb-neutral-700: #353a47;
  --gb-neutral-800: #21252f;
  --gb-neutral-900: #13151c;

  /* COLOR — acento primario azul-violeta */
  --gb-primary-50:  #eef0ff;
  --gb-primary-100: #dde1ff;
  --gb-primary-300: #9ba4ff;
  --gb-primary-500: #5b67ea;
  --gb-primary-600: #4853d4;
  --gb-primary-700: #3a43ad;
  --gb-primary-900: #1f2466;

  /* COLOR — semánticos */
  --gb-success-50:  #e8f6ee;
  --gb-success-500: #15a34a;
  --gb-success-600: #128a3e;
  --gb-success-700: #0d6e31;
  --gb-warning-50:  #fdf3e0;
  --gb-warning-500: #d97706;
  --gb-warning-600: #b45309;
  --gb-danger-50:   #fbeaea;
  --gb-danger-500:  #d4202c;
  --gb-danger-600:  #b01a25;
  --gb-danger-700:  #8c1019;
  --gb-info-50:     #e6f2fb;
  --gb-info-500:    #0c75c9;

  /* COLOR — identidad de marca Gourmet Bites */
  --gb-cream:       #f4f3f1;  /* fondo crema catering (legacy --cl) */
  --gb-gold-50:     #f5efe0;  /* gold light — legacy --gdl */
  --gb-gold-500:    #c9a96e;  /* gold catering — legacy --gd */
  --gb-gold-700:    #a78a4f;  /* gold dark hover */

  /* SUPERFICIES */
  --gb-bg:          var(--gb-neutral-25);
  --gb-surface:     var(--gb-neutral-0);
  --gb-surface-alt: var(--gb-neutral-50);
  --gb-border:      var(--gb-neutral-200);
  --gb-border-strong: var(--gb-neutral-300);
  --gb-text:        var(--gb-neutral-800);
  --gb-text-muted:  var(--gb-neutral-500);
  --gb-text-faint:  var(--gb-neutral-400);

  /* TIPOGRAFÍA */
  --gb-font-display: 'Fraunces', 'Georgia', serif;
  --gb-font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --gb-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ESCALA — modo COMPACTA (default desktop) */
  --gb-fs-xs:    11px;
  --gb-fs-sm:    12px;
  --gb-fs-base:  14px;
  --gb-fs-md:    15px;
  --gb-fs-lg:    17px;
  --gb-fs-xl:    20px;
  --gb-fs-2xl:   26px;
  --gb-fs-3xl:   34px;

  --gb-lh-tight: 1.25;
  --gb-lh-base:  1.5;
  --gb-lh-loose: 1.65;

  /* ESPACIADO 4px */
  --gb-space-1:  4px;
  --gb-space-2:  8px;
  --gb-space-3:  12px;
  --gb-space-4:  16px;
  --gb-space-5:  20px;
  --gb-space-6:  24px;
  --gb-space-8:  32px;
  --gb-space-10: 40px;
  --gb-space-12: 48px;
  --gb-space-16: 64px;

  /* ALTURAS */
  --gb-control-h: 32px;
  --gb-control-h-sm: 26px;
  --gb-control-h-lg: 40px;
  --gb-tap-min: 44px;

  /* RADIOS */
  --gb-radius-sm: 4px;
  --gb-radius:    6px;
  --gb-radius-md: 8px;
  --gb-radius-lg: 12px;
  --gb-radius-pill: 9999px;

  /* SOMBRAS */
  --gb-shadow-xs: 0 1px 2px rgba(19, 21, 28, 0.04);
  --gb-shadow-sm: 0 1px 3px rgba(19, 21, 28, 0.06), 0 1px 2px rgba(19, 21, 28, 0.04);
  --gb-shadow-md: 0 4px 12px rgba(19, 21, 28, 0.08), 0 2px 4px rgba(19, 21, 28, 0.04);
  --gb-shadow-lg: 0 10px 28px rgba(19, 21, 28, 0.12), 0 4px 8px rgba(19, 21, 28, 0.06);

  /* TIMING */
  --gb-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --gb-transition-slow: 250ms cubic-bezier(0.4, 0, 0.2, 1);

  /* SIDEBAR — específicos del Bloque 2 */
  --gb-sidebar-w-expanded: 248px;
  --gb-sidebar-w-collapsed: 64px;
  --gb-sidebar-bg: var(--gb-neutral-900);
  --gb-sidebar-bg-hover: rgba(255, 255, 255, 0.06);
  --gb-sidebar-bg-active: rgba(255, 255, 255, 0.10);
  --gb-sidebar-text: var(--gb-neutral-300);
  --gb-sidebar-text-muted: var(--gb-neutral-500);
  --gb-sidebar-text-active: var(--gb-neutral-0);
  --gb-sidebar-border: rgba(255, 255, 255, 0.08);
  --gb-header-h: 48px;
}

[data-density="comfortable"] {
  --gb-fs-xs:   12px;
  --gb-fs-sm:   13px;
  --gb-fs-base: 16px;
  --gb-fs-md:   17px;
  --gb-fs-lg:   19px;
  --gb-fs-xl:   22px;
  --gb-fs-2xl:  28px;
  --gb-fs-3xl:  36px;
  --gb-control-h: 44px;
  --gb-control-h-sm: 36px;
  --gb-control-h-lg: 52px;
}

@media (max-width: 768px) {
  :root {
    --gb-fs-xs:   12px;
    --gb-fs-sm:   13px;
    --gb-fs-base: 16px;
    --gb-fs-md:   17px;
    --gb-fs-lg:   19px;
    --gb-fs-xl:   22px;
    --gb-fs-2xl:  28px;
    --gb-fs-3xl:  32px;
    --gb-control-h: 44px;
    --gb-control-h-sm: 36px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--gb-font-body);
  font-size: var(--gb-fs-base);
  line-height: var(--gb-lh-base);
  color: var(--gb-text);
  background: var(--gb-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv11', 'ss03', 'tnum';
}
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: var(--gb-lh-tight); }
.gb-display { font-family: var(--gb-font-display); font-weight: 600; font-variation-settings: "opsz" 144, "SOFT" 30; letter-spacing: -0.02em; }
.gb-mono { font-family: var(--gb-font-mono); font-variant-numeric: tabular-nums; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--gb-primary-500); outline-offset: 2px; border-radius: var(--gb-radius-sm); }