/* tokens.css — design tokens as CSS custom properties.
 *
 * Scaffold token set (brief 001). A neutral dark base good enough to frame the
 * stub screens; the warm-wood "dojo" skin layer (brief 006) builds its own
 * token set over this. Names use the `--l2b-*` prefix; each shadow root
 * inherits these from :root.
 *
 * NO bundled font (plan §Phase 2): Chinese renders with a SYSTEM CJK stack, so
 * the 55 MB ArialUnicode.ttf is never shipped. Edit the stack with that in mind
 * — every entry must be a font already present on the target OS.
 */

:root {
  /* Surfaces */
  --l2b-bg:            #1a1a1a;   /* primary dark body */
  --l2b-bg-header:     #000000;   /* header bar */
  --l2b-surface:       #2a2a2a;   /* cards, lesson boxes */
  --l2b-surface-hover: #333333;
  --l2b-border:        #3a3a3a;

  /* Foreground */
  --l2b-fg:            #ffffff;
  --l2b-muted:         #999999;

  /* Brand accents (placeholder — dojo skin in brief 006 retunes these) */
  --l2b-accent:        #f89b25;   /* warm orange */
  --l2b-on-accent:     #ffffff;
  --l2b-success:       #a4cb39;
  --l2b-error:         #e57373;

  /* L2B line-drawing image cell. The PNGs are transparent line art designed for
     white paper; on the dark surface they'd vanish, so tiles + intro + preview
     paint them on white (canonical iOS image cell). Brief 006 may retune. */
  --l2b-image-bg:      #ffffff;

  /* Typography — system stack with CJK fallbacks. NO bundled webfont.
     Apple (PingFang SC), Windows (Microsoft YaHei), Android/Linux
     (Noto Sans CJK SC) each contribute a Simplified-Chinese-capable face. */
  --l2b-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
              "Helvetica Neue", "PingFang SC", "Hiragino Sans GB",
              "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
  --l2b-h1: 1.5rem;
  --l2b-h2: 1.2rem;

  /* Layout */
  --l2b-radius: 8px;
  --l2b-gap:    0.75rem;

  /* Breakpoints (mirror KFE Web's documented values). CSS custom properties
     cannot be used inside @media conditions, so any `@media (min-width: …)`
     must hardcode the same pixel value declared here. */
  --l2b-bp-phone:   600px;
  --l2b-bp-desktop: 1024px;

  color-scheme: dark;
}

/* Safe-area inset support for iOS standalone PWA */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }
}