:root {
  --paper: #F3E6C9;
  --paper-inner: #F7EDD6;
  --ink: #1A140C;
  --ink-muted: #5C5346;
  --rail: #2B2722;
  --rail-steel: #6F675C;
  --ticket-red: #B42318;
  --grease: #E2B93A;
  --grease-dark: #8A6A12;
  --ok: #2F5D32;
  --watch: #8A5A12;
  --over: #B42318;
  --line: #C9B896;
  --white: #FFFBF2;
  --signal-blue: #2F5D73;
  --signal-purple: #5B3F73;

  /* The Expo Arcade v2 Semantics */
  --bg-worktop: #F3E6C9;
  --bg-surface: #FFFBF2;
  --border-subtle: #C9B896;
  --border-dark: #1A140C;
  --text-ink: #1A140C;
  --text-muted: #5C5346;
  --chef-orange: #E2B93A;
  --pass-green: #2F5D32;
  --alert-red: #B42318;

  --focus-ring: 2px solid var(--grease-dark);
  --exo-shadow: 0 2px 0 #1A140C;
  --exo-shadow-small: 0 2px 0 #1A140C;

  --font-display: "Arial Narrow", "Helvetica Neue Condensed", "Impact", "Franklin Gothic Medium", sans-serif;
  --font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-ticket: "SF Mono", Menlo, Consolas, "Courier New", ui-monospace, monospace;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;

  --radius-card: 2px;
  --radius-button: 2px;

  --type-stat: clamp(2.5rem, 9vw, 4.75rem);
  --type-h1: clamp(1.75rem, 5vw, 2.75rem);
  --type-body: 1rem;
  --exo-paper-shadow: rgba(26, 20, 12, 0.12);
}

html { background: var(--rail); }
body { background: var(--paper); color: var(--ink); font-family: var(--font-body); }

:where(a, button, input, select, textarea):focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
:where(button, .btn, input, select, textarea) { min-height: 44px; }
.ticket { border-width: 2px; }
.ticket[data-pour-calculator], .ticket[data-cocktail-calculator] { --station-accent: var(--signal-purple); }
.ticket[data-guest-calculator] { isolation: isolate; }

/* Tactile mechanical ticket snap for high-glare/kitchen visibility */
@keyframes ticket-snap {
  0%, 100% { transform: none; }
}

.stats.is-blocked {
  border: 2px solid var(--ticket-red);
  border-left: 6px solid var(--ticket-red);
  padding: var(--space-md);
  background: #FBEDEA;
  border-radius: 4px;
  position: relative;
  animation: ticket-snap 120ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

/* Mechanical perforation punched notch render on ticket edge */
.stats.is-blocked::after {
  content: "";
  position: absolute;
  top: -2px;
  right: 18px;
  width: 14px;
  height: 8px;
  background: var(--paper, #F3E6C9);
  border: 2px solid var(--ticket-red);
  border-top: none;
  border-radius: 0 0 7px 7px;
}

.stats.is-blocked::before { content: "CALCULATION BLOCKED — correct highlighted inputs"; display: block; margin-bottom: var(--space-sm); color: var(--ticket-red); font: 800 0.82rem/1.3 var(--font-ticket); letter-spacing: 0.04em; }
.stats.is-blocked .stat { box-shadow: none; opacity: 0.75; }
.stats.is-blocked [data-calculation-errors] { display: block; color: var(--ticket-red); font-weight: 700; }
.calculation-status, .calculation-errors { margin: var(--space-sm) 0; font-family: var(--font-ticket); }
.calculation-status { font-weight: 800; letter-spacing: 0.05em; }
.calculation-errors { color: var(--ticket-red); font-weight: 700; }

.alert {
  border-left: 6px solid var(--signal-blue);
  animation: ticket-snap 120ms cubic-bezier(0.2, 0.9, 0.3, 1.1);
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }