/* tml design tokens. See .claude/DESIGN.md. Customers: edit values here or use Config.Theme.vars.
   The pager is a retro device, so it adds shell, LCD and button tokens on top of the house palette. */

@font-face {
  font-family: "Inter";
  src: url("fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("fonts/vt323.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* house palette */
  --accent: #A855F7;
  --accent-strong: #9333EA;
  --accent-dark: #7E22CE;
  --danger: #E53E3E;

  /* shell: translucent purple plastic. Try #2b3a55 (blue) or #3a3a40 (graphite) */
  --shell-hi: #8b4fd0;
  --shell-mid: #5b2a94;
  --shell-lo: #35185a;
  --shell-edge: rgba(255, 255, 255, 0.35);

  /* LCD. Try backlight amber: bg #d9a93a, ink #2a1c05 */
  --lcd-bg: #a9bb8e;
  --lcd-bg-lo: #93a878;
  --lcd-ink: #1c2616;
  --lcd-bezel: #14111a;

  /* buttons */
  --btn-hi: #2c2935;
  --btn-lo: #16141c;
  --btn-label: #c9c3d6;

  /* text on the shell */
  --label: rgba(255, 255, 255, 0.85);

  /* type */
  --font-ui: "Inter", system-ui, "Segoe UI", sans-serif;
  --font-lcd: "VT323", ui-monospace, Consolas, monospace;
  --lcd-size: 1.5rem;
}