/* public/css/tokens.css — theme tokens + screen visibility (T4.1).
 *
 * PLACEHOLDER styling only (reusability grade C) — the publisher/designer
 * replaces this with real visuals later. Kept minimal on purpose: colors,
 * spacing, and the .screen toggle contract that core/fsm.js drives.
 *
 * Color tokens below are FALLBACKS for design-time preview only. At runtime
 * core/fsm.js's applyTheme(theme, rootEl) overwrites --color-primary/
 * --color-bg/--color-accent on the root element from config/event.json's
 * `theme` block, so pages never hardcode brand colors in CSS or markup.
 */
/* Self-hosted Pretendard (publisher design font). CDN links are blocked on the deploy
   network, so the woff2 ships in public/fonts and is loaded by relative path (works under
   the /smile-bingsu/ subpath). Variable font — one file covers weights 400..700. */
@font-face {
  font-family: "Pretendard";
  src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-primary: #2563EB;
  --color-bg: #F5F7FA;
  --color-accent: #EF4444;
  --color-fg: #111827;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 32px;

  --font-sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
  /* signage.css/mobile.css reference var(--font); alias it to the sans stack so the
     publisher font applies everywhere without touching each page's body rule. */
  --font: var(--font-sans);
  --radius: 8px;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
}

/*
 * Screen toggle contract (paired with core/fsm.js createScreenFsm):
 *   <div id="root" data-screen="S01">
 *     <section class="screen" data-screen-view="S01">...</section>
 *     <section class="screen" data-screen-view="S03">...</section>
 *   </div>
 * The FSM keeps `data-screen` on the root in sync with a `screen--active`
 * class on the one matching `[data-screen-view]` child. Every `.screen` is
 * hidden by default; only `.screen--active` is shown. Screen names are
 * dynamic (signage: S01,S03,S04,S05,S05-P,S06,S06-L,S08; mobile: S02,
 * S02-C,S02-W,S02-CALL,S02-GO,S02-X) so this class-based rule is used
 * instead of one attribute-selector-per-screen-name.
 */
.screen {
  display: none;
}

.screen--active {
  display: flex;
  flex-direction: column;
}