/* Bakery Bethlehem · TV Menu — Design Tokens
   Single source of truth. All templates import this file.
   Spec: 1920×1080 · 4–5 m viewing · Fire TV / Silk */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Barlow+Condensed:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  --bg:        #1a120b;
  --bg-2:      #221710;
  --surface:   #2a1f14;
  --surface-2: #34281b;
  --line:      #4a3826;
  --line-soft: #3a2c1d;

  --accent:     #feb913;
  --accent-dim: #a87a0d;
  --cream:      #f5e6d0;
  --muted:      #b89a7a;
  --muted-2:    #7d6346;

  --co-yellow: #fcd116;
  --co-blue:   #003893;
  --co-red:    #ce1126;

  --tv-h-display: 140px;
  --tv-h-1:        96px;
  --tv-h-2:        72px;
  --tv-h-3:        42px;
  --tv-h-4:        32px;
  --tv-body-lg:    32px;
  --tv-body-md:    26px;
  --tv-body-sm:    20px;
  --tv-meta:       18px;
  --tv-mono:       13px;

  --ease:    cubic-bezier(.4, 0, .2, 1);
  --hold:    15s;
  --fade:    600ms;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--cream);
  font-family: "Barlow Condensed", system-ui, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
}

.tv-stage {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: #000;
  overflow: hidden;
}
.tv-canvas {
  position: relative;
  width: 1920px;
  height: 1080px;
  background: var(--bg);
  transform-origin: center center;
  overflow: hidden;
}

.flag-stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--co-yellow) 0 33.33%,
    var(--co-blue)   33.33% 66.66%,
    var(--co-red)    66.66% 100%
  );
  z-index: 10;
}

.tv-header {
  height: 88px;
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 56px;
  background: var(--bg);
  position: relative;
  z-index: 4;
  gap: 18px;
}
.tv-header__logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
}
.tv-header__brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tv-header__name {
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px;
  letter-spacing: 0.14em;
  color: var(--accent);
  line-height: 1;
}
.tv-header__tag {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.32em;
  color: var(--muted-2);
  text-transform: uppercase;
}
.tv-header__meta {
  text-align: right;
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--muted);
  letter-spacing: 0.12em;
  line-height: 1.6;
}
.tv-header__meta .open { color: var(--accent); font-weight: 500; }

.tv-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 56px;
  border-top: 1px solid var(--line);
  background: var(--bg);
  z-index: 4;
  overflow: hidden;
}
.tv-footer__ticker {
  display: flex;
  align-items: center;
  height: 100%;
  white-space: nowrap;
  animation: ticker-scroll 30s linear infinite;
  gap: 64px;
  padding: 0 32px;
}
.tv-footer__ticker-item {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.tv-footer__ticker-item img {
  height: 24px;
  width: auto;
  filter: brightness(0.85);
}
.tv-footer__ticker-text {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.tv-footer__ticker-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-dim);
  flex-shrink: 0;
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.price { font-variant-numeric: tabular-nums; }
.price--single {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  color: var(--accent);
}
.price-tiers {
  display: inline-flex;
  gap: 20px;
  align-items: flex-end;
}
.price-tier {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1;
}
.price-tier__label {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.22em;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.price-tier__value {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.slides {
  position: absolute;
  inset: 0;
}
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--fade) var(--ease);
  pointer-events: none;
}
.slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.tri-rule {
  display: flex;
  height: 3px;
  width: 40px;
}
.tri-rule i {
  display: block;
  height: 100%;
}
.tri-rule i:nth-child(1) { flex: 14; background: var(--co-yellow); }
.tri-rule i:nth-child(2) { flex: 12; background: var(--co-blue); }
.tri-rule i:nth-child(3) { flex: 14; background: var(--co-red); }

.divider-v { width: 1px; background: var(--line-soft); height: 100%; }
.divider-h { height: 1px; background: var(--line-soft); width: 100%; }