/**
 * Bistromagic — Design Tokens
 *
 * Demo 01 "Cellar" — dark, moody, fine dining.
 *
 * Every value a template or widget uses comes from here. No hex codes,
 * font stacks, or magic spacing numbers anywhere else in the codebase.
 * Demos 02–06 override this file only; they never fork components.
 *
 * Direction notes:
 * - The base is a warm brown-black, not neutral #000. A dining room at
 *   night is lit by candle and filament, never by fluorescent grey.
 * - The accent is ember red (char, embers, cured meat), not the metallic
 *   gold that every fine-dining template reaches for. Brass appears only
 *   as hairline rules at low opacity.
 * - Radii are near-zero. Letterpressed menu cards have corners.
 */

:root {
  /* ---------------------------------------------------------------
     Palette — surfaces
     Warm dark neutrals, hue-shifted toward brown. Each step is a real
     surface level, not a shade ramp; use them semantically.
     --------------------------------------------------------------- */
  --bmg-surface-deep:      #12100D;  /* page behind everything, hero overlays */
  --bmg-surface-base:      #1A1713;  /* default page background */
  --bmg-surface-raised:    #241F1A;  /* cards, menu panels, modals */
  --bmg-surface-overlay:   #2E2721;  /* dropdowns, hover states on raised */
  --bmg-surface-hairline:  #352D26;  /* borders, dividers, table rules */

  /* Palette — content */
  --bmg-content-primary:   #F0E9DC;  /* linen — headings, dish names */
  --bmg-content-secondary: #C4B9A8;  /* body copy, descriptions */
  --bmg-content-muted:     #8B8175;  /* captions, meta, disabled */
  --bmg-content-inverse:   #12100D;  /* text on accent fills */

  /* Palette — accent */
  --bmg-accent:            #A03E30;  /* ember — primary CTA, active states */
  --bmg-accent-hover:      #B84A3A;
  --bmg-accent-quiet:      #4A211C;  /* accent-tinted fills, badge grounds */
  --bmg-brass:             #B08D57;  /* hairline rules and marks only */

  /* Palette — semantic */
  --bmg-dietary:           #6E7A5E;  /* bay leaf — veg/vegan/GF tags */
  --bmg-warning:           #C08A3E;  /* low stock, closing soon */
  --bmg-danger:            #B4453C;  /* sold out, errors, voids */
  --bmg-open:              #6E7A5E;  /* "Open now" state */
  --bmg-closed:            #8B8175;  /* "Closed" state */

  /* ---------------------------------------------------------------
     Typography
     Three roles. Fraunces carries personality and is used with restraint;
     Karla does the reading; Archivo handles anything numeric because it
     has real tabular figures — non-negotiable for a price column.
     --------------------------------------------------------------- */
  --bmg-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --bmg-font-body:    "Karla", -apple-system, BlinkMacSystemFont, sans-serif;
  --bmg-font-utility: "Archivo", ui-sans-serif, system-ui, sans-serif;

  /* Fraunces variable axes — soft, slightly wonky at display sizes,
     tightened and optically corrected at small sizes. */
  --bmg-display-settings: "SOFT" 40, "WONK" 1, "opsz" 96;
  --bmg-display-settings-sm: "SOFT" 20, "WONK" 0, "opsz" 24;

  /* Fluid type scale — 1.25 minor third, clamped for mobile */
  --bmg-text-2xs:  0.6875rem;                              /* 11px — tags */
  --bmg-text-xs:   0.75rem;                                /* 12px — eyebrows */
  --bmg-text-sm:   0.875rem;                               /* 14px — meta */
  --bmg-text-base: 1rem;                                   /* 16px — body */
  --bmg-text-md:   clamp(1.125rem, 0.4vw + 1.03rem, 1.25rem);
  --bmg-text-lg:   clamp(1.375rem, 0.9vw + 1.16rem, 1.75rem);
  --bmg-text-xl:   clamp(1.75rem, 1.8vw + 1.33rem, 2.5rem);
  --bmg-text-2xl:  clamp(2.25rem, 3.2vw + 1.5rem, 3.5rem);
  --bmg-text-3xl:  clamp(2.75rem, 5.5vw + 1.4rem, 5rem);
  --bmg-text-4xl:  clamp(3.25rem, 8vw + 1.2rem, 7rem);

  --bmg-weight-light:    300;
  --bmg-weight-regular:  400;
  --bmg-weight-medium:   500;
  --bmg-weight-semibold: 600;

  --bmg-leading-tight:   1.08;   /* display headings */
  --bmg-leading-snug:    1.3;    /* dish names, subheads */
  --bmg-leading-normal:  1.6;    /* body */
  --bmg-leading-relaxed: 1.75;   /* long-form editorial */

  /* Tracking. The wide setting is the eyebrow/small-caps treatment that
     runs through the whole theme — section labels, hours, prices. */
  --bmg-tracking-tight:  -0.02em;
  --bmg-tracking-normal: 0;
  --bmg-tracking-wide:   0.08em;
  --bmg-tracking-wider:  0.18em;

  /* ---------------------------------------------------------------
     Space — 4px base, named by intent
     --------------------------------------------------------------- */
  --bmg-space-3xs: 0.25rem;
  --bmg-space-2xs: 0.5rem;
  --bmg-space-xs:  0.75rem;
  --bmg-space-sm:  1rem;
  --bmg-space-md:  1.5rem;
  --bmg-space-lg:  2rem;
  --bmg-space-xl:  3rem;
  --bmg-space-2xl: 4.5rem;
  --bmg-space-3xl: 7rem;

  /* Vertical rhythm between page sections — fluid so mobile doesn't
     inherit desktop's generous breathing room. */
  --bmg-section-y: clamp(3.5rem, 8vw, 9rem);

  /* Layout */
  --bmg-container:      82.5rem;  /* 1320px */
  --bmg-container-text: 44rem;    /* 704px — comfortable measure */
  --bmg-gutter:         clamp(1.25rem, 4vw, 3rem);

  /* ---------------------------------------------------------------
     Form — restrained. Fine dining is squared off.
     --------------------------------------------------------------- */
  --bmg-radius-none: 0;
  --bmg-radius-sm:   2px;
  --bmg-radius-md:   3px;
  --bmg-radius-full: 999px;   /* pills/badges only */

  --bmg-border-hairline: 1px solid var(--bmg-surface-hairline);
  --bmg-border-brass:    1px solid rgba(176, 141, 87, 0.28);

  /* Depth comes from surface steps and hairlines, not drop shadows.
     These exist for overlays that must float above content. */
  --bmg-shadow-overlay: 0 24px 60px -12px rgba(0, 0, 0, 0.7);
  --bmg-shadow-lifted:  0 8px 24px -8px rgba(0, 0, 0, 0.5);

  /* ---------------------------------------------------------------
     Motion — slow and settled. Nothing bounces.
     --------------------------------------------------------------- */
  --bmg-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --bmg-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --bmg-duration-fast: 180ms;
  --bmg-duration-base: 320ms;
  --bmg-duration-slow: 620ms;

  /* Z-index scale — every layer named, so nothing gets a z-index of 9999 */
  --bmg-z-base:     1;
  --bmg-z-sticky:   100;
  --bmg-z-header:   200;
  --bmg-z-drawer:   300;
  --bmg-z-modal:    400;
  --bmg-z-toast:    500;
}

/**
 * Signature primitive — the menu leader rule.
 *
 * The dotted line running from a dish name to its price is the one
 * artifact unique to a printed restaurant menu. It is the theme's
 * signature element and appears in every menu layout.
 *
 * Implemented as a flex row with a repeating-gradient rule that grows
 * to fill available space, so it works at any width, with any name
 * length, and reflows correctly on wrap.
 */
.bmg-leader {
  display: flex;
  align-items: baseline;
  gap: var(--bmg-space-xs);
  width: 100%;
}

.bmg-leader__rule {
  flex: 1 1 auto;
  min-width: var(--bmg-space-md);
  height: 1px;
  align-self: center;
  margin-block-start: 0.35em;
  background-image: radial-gradient(
    circle, rgba(176, 141, 87, 0.45) 0.5px, transparent 0.6px
  );
  background-size: 5px 1px;
  background-repeat: repeat-x;
}

/* Prices always use tabular figures so a column of them aligns. */
.bmg-price {
  font-family: var(--bmg-font-utility);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: var(--bmg-tracking-wide);
  color: var(--bmg-content-primary);
  white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --bmg-duration-fast: 1ms;
    --bmg-duration-base: 1ms;
    --bmg-duration-slow: 1ms;
  }
}