/* ═══════════════════════════════════════════════════
   BRAND FONTS — Toyota Type
════════════════════════════════════════════════════ */
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-LightIt.woff2') format('woff2'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-Book.woff2') format('woff2'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-BookIt.woff2') format('woff2'); font-weight: 350; font-style: italic; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-Italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-Semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-SemiboldIt.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-BoldIt.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Toyota Type'; src: url('../fonts/ToyotaType-BlackIt.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
   → Replace these values with your brand colors.
   Usage guide:
     --color-primary   : main brand color (CTAs, highlights)
     --color-secondary : accent color (alerts, warnings)
     --color-bg        : dark background
     --font-headline   : hero/display text
     --font-solid      : sub-headlines, labels
     --font-body       : body copy, functional UI text
════════════════════════════════════════════════════ */
:root {
  /* Toyota brand palette */
  --color-black:     #000000;   /* Toyota Black */
  --color-red:       #FF0000;   /* Toyota Red */
  --color-white:     #FFFFFF;   /* Toyota White */
  --color-gray:      #9FA0A0;   /* Toyota Gray */
  --color-faint-gray:#F9F9F9;   /* Toyota Faint Gray */

  /* Semantic aliases */
  --color-primary:   var(--color-red);
  --color-bg:        var(--color-black);

  /* Card & slot sizing — auto-scales via clamp */
  --card-w: 140px;
  --card-h: 168px;

  /* Font stack — Toyota Type across all weights */
  --font-headline: 'Toyota Type', sans-serif;
  --font-solid:    'Toyota Type', sans-serif;
  --font-body:     'Toyota Type', sans-serif;
}

/* ── Reset (touch-kiosk safe) ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0; padding: 0;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
html {
  overscroll-behavior: none;
  touch-action: none;
  background: var(--color-black);
  height: 100%;
}
body {
  background: var(--color-faint-gray);
  font-family: var(--font-solid);
  overflow: hidden;
  /* 9:16 portrait layout — centers on landscape monitors */
  width: min(100vw, 100svh * 9 / 16);
  height: 100svh;
  margin: 0 auto;
  position: relative;
  touch-action: none;
  container-type: inline-size;
}

/* ═══════════════════════════════════════════════════
   SCREEN SYSTEM
   All screens are stacked & toggled via .hidden class.
   showScreen(id) handles transitions.
════════════════════════════════════════════════════ */
.screen {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.45s ease;
  pointer-events: all;
}
.screen.hidden {
  opacity: 0;
  pointer-events: none;
}