/* ============================================================
   OBQ Burgers — brand tokens for obqburgers.ca
   Derived from the in-store menu boards (charcoal wood, gold
   accents, white type) per direction: keep the orange/black
   concept, warmer and more neighbourhood-friendly.
   Display: Baloo 2 (chunky, warm). Body: Nunito Sans.
   ============================================================ */

:root {
  /* Charcoal — warm near-black, replaces flat #000 */
  --obq-char:      #171310;
  --obq-char-2:    #201A14;   /* raised board / card */
  --obq-char-3:    #2A2219;   /* hover / inner surface */
  --obq-char-rule: #3A2F22;   /* hairlines on dark */

  /* Flame orange — refined from the boards' yellow-gold */
  --obq-orange:       #F49523;
  --obq-orange-dark:  #D97C0E;
  --obq-orange-deep:  #B96504;
  --obq-orange-soft:  #FCDDAF;  /* subtle text on dark, badges */

  /* Cream daylight surfaces */
  --obq-cream:      #FAF3E4;
  --obq-cream-soft: #F2E7CF;
  --obq-cream-rule: #E3D5B6;

  /* Ink on cream */
  --obq-ink:      #221A11;
  --obq-ink-soft: #5C5140;
  --obq-ink-mute: #8A7C64;

  /* Sparing accent for spicy tags */
  --obq-red: #C8451F;

  --obq-white: #FFFFFF;

  /* Type */
  --obq-font-display: 'Baloo 2', 'Arial Rounded MT Bold', system-ui, sans-serif;
  --obq-font-body:    'Nunito Sans', system-ui, -apple-system, sans-serif;

  --obq-text-xs: 12px;  --obq-text-sm: 14px;  --obq-text-base: 16px;
  --obq-text-md: 18px;  --obq-text-lg: 22px;  --obq-text-xl: 28px;
  --obq-text-2xl: 38px; --obq-text-3xl: 52px;

  --obq-track-caps: 0.07em;
  --obq-track-wide: 0.18em;

  /* Spacing — 4pt */
  --obq-s-1: 4px;  --obq-s-2: 8px;  --obq-s-3: 12px; --obq-s-4: 16px;
  --obq-s-5: 24px; --obq-s-6: 32px; --obq-s-7: 48px; --obq-s-8: 64px;
  --obq-s-9: 96px;

  /* Radii — rounded and friendly */
  --obq-r-sm: 8px; --obq-r-md: 14px; --obq-r-lg: 20px; --obq-r-pill: 999px;

  /* Shadows — warm, soft */
  --obq-shadow-card: 0 6px 24px rgba(23, 19, 16, 0.10);
  --obq-shadow-pop:  0 14px 44px rgba(23, 19, 16, 0.16);

  /* Motion */
  --obq-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --obq-dur-fast: 170ms;
  --obq-dur-base: 260ms;

  /* Layout */
  --obq-container: 1160px;
  --obq-gutter: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--obq-cream);
  color: var(--obq-ink);
  font-family: var(--obq-font-body);
  font-size: var(--obq-text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { font-family: var(--obq-font-display); margin: 0; line-height: 1.05; }
p { margin: 0; }

/* Section label — ALL CAPS orange, board style */
.obq-label {
  font-family: var(--obq-font-display);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: var(--obq-track-wide);
  color: var(--obq-orange-dark);
}
.on-dark .obq-label { color: var(--obq-orange); }

/* Buttons — friendly pills */
.obq-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  font-family: var(--obq-font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  border-radius: var(--obq-r-pill);
  border: 0;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--obq-dur-fast) var(--obq-ease),
              color var(--obq-dur-fast) var(--obq-ease),
              transform var(--obq-dur-fast) var(--obq-ease);
  background: var(--obq-orange);
  color: var(--obq-char);
}
.obq-btn:hover { background: var(--obq-orange-dark); color: var(--obq-char); }
.obq-btn:active { transform: scale(0.97); }
.obq-btn--dark { background: var(--obq-char); color: var(--obq-cream); }
.obq-btn--dark:hover { background: var(--obq-char-3); color: var(--obq-cream); }
.obq-btn--ghost {
  background: transparent;
  color: var(--obq-ink);
  border: 2px solid var(--obq-ink);
}
.obq-btn--ghost:hover { background: var(--obq-ink); color: var(--obq-cream); }
.obq-btn--ghost-light {
  background: transparent;
  color: var(--obq-cream);
  border: 2px solid rgba(250, 243, 228, 0.5);
}
.obq-btn--ghost-light:hover { background: rgba(250, 243, 228, 0.14); color: var(--obq-white); }

/* Tag chips */
.obq-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--obq-r-pill);
  font-family: var(--obq-font-display);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.obq-tag--spicy { background: var(--obq-red); color: var(--obq-white); }
.obq-tag--veg { background: #5E7B3F; color: var(--obq-white); }
.obq-tag--new { background: var(--obq-orange); color: var(--obq-char); }

::selection { background: var(--obq-orange); color: var(--obq-char); }