/* Bringo redesign — shared global tokens for both directions */

:root{
  /* Brand red — never compromised */
  --bringo-red: #ef433e;
  --bringo-red-deep: #9b1410;
  --bringo-red-50: #fde8e7;
  --bringo-red-100: #fbd2d0;

  /* Direction A — Editorial Motion (warm paper) */
  --A-paper: #f6f1e8;
  --A-paper-2: #ece4d4;
  --A-ink: #1c1612;
  --A-ink-2: #4a3f33;
  --A-rule: rgba(28,22,18,.18);
  --A-mute: rgba(28,22,18,.55);

  /* Direction B — Operations Console (charcoal + electric mint) */
  --B-bg: #0c0e0d;
  --B-bg-2: #14181a;
  --B-card: #1a1f22;
  --B-rule: rgba(255,255,255,.09);
  --B-text: #e6ebe8;
  --B-mute: rgba(230,235,232,.55);
  --B-mint: #6cffb0;

  /* Type stacks */
  --serif: "Fraunces", "Cormorant Garamond", "Times New Roman", serif;
  --sans:  "Inter Tight", "Söhne", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --mono:  "JetBrains Mono", "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{ font-family: var(--sans); -webkit-font-smoothing: antialiased; }

/* prevent horizontal scrollbars showing inside artboards */
.bringo-screen *::-webkit-scrollbar{ width:0; height:0; }
.bringo-screen{ scrollbar-width: none; }

/* shared utility */
.tnum{ font-variant-numeric: tabular-nums; }
.upper{ text-transform: uppercase; letter-spacing: .08em; }

/* Bringo logo (drawn — italic bold + HEY badge, no PNG) */
.bringo-logo{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:900; font-style:italic; letter-spacing:-0.02em;
  font-family: var(--sans);
}
.bringo-logo .hey{
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--bringo-red); color:#fff;
  font-style: normal; font-weight: 800;
  letter-spacing: .04em;
  width: 1.9em; height: 1.9em;
  border-radius: 4px;
  font-size: .55em;
  transform: skewX(-8deg);
}
.bringo-logo .word{
  color: var(--bringo-red);
  transform: skewX(-8deg);
  display:inline-block;
}

/* dotted route — used by Direction A */
.routeline{
  background-image: radial-gradient(circle, currentColor 1.2px, transparent 1.4px);
  background-size: 12px 12px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  height: 12px;
}

/* small marquee */
@keyframes marquee-x { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.marquee-track{ display:flex; gap:48px; animation: marquee-x 40s linear infinite; will-change: transform; }
.marquee-track:hover{ animation-play-state: paused; }

/* Direction B: ticker tape */
@keyframes ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.ticker-track{ display:flex; gap:40px; animation: ticker 60s linear infinite; }

/* blinking cursor (B) */
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.blink{ animation: blink 1.05s steps(1) infinite; }

/* generic focus reset inside artboards */
.bringo-screen button{ font-family: inherit; }
.bringo-screen input, .bringo-screen textarea, .bringo-screen select{ font-family: inherit; }