/*
 * @araharah/theme — entry stylesheet (Tailwind v4, CSS-first)
 * ------------------------------------------------------------------
 * Build:  npm run build  →  dist/rams.css  (D-17: local npm scripts only)
 * Tokens: @import-ed from tokens.css — the single source of truth
 *         for every value (D-01, D-07).
 *
 * No Google Fonts CDN — Geist + Space Grotesk are self-hosted from
 * theme/fonts/ (D-16), fetched from Fontsource static subsets
 * (both typefaces are SIL Open Font License 1.1).
 */

@import "tailwindcss";
@import "./tokens.css";
@import "./components.css";

/*
 * Class candidates (D-02, D-06): the four mockup screens are the
 * read-only vocabulary reference — their markup files are scanned so
 * every mockup class compiles from this package; the mockup files
 * themselves are never edited. Family utilities are safelisted
 * explicitly because the mockups address fonts through their inline
 * config instead.
 *
 * Source scope is deliberately narrow (WR-01): ONLY the four mockup
 * markup files are explicit sources, and the theme toolchain's own
 * text (scripts/, basemap/) is excluded from the auto-scan — prose
 * must never mint utility classes (the bare `shadow`/`blur`/`rounded`
 * strays previously compiled from design-doc and audit prose).
 */
@source "../../stitch_minimalist_route_navigator/active_route_guidance/code.html";
@source "../../stitch_minimalist_route_navigator/community_incident_reporter/code.html";
@source "../../stitch_minimalist_route_navigator/navigate_map_overview/code.html";
@source "../../stitch_minimalist_route_navigator/telegram_live_traffic_feed/code.html";
@source not "../scripts";
@source not "../basemap";
@source inline("font-geist");
@source inline("font-space-grotesk");

/*
 * Self-hosted typefaces — font-display: block (no fallback-font flash;
 * Rams: surfaces behave like machined housing, nothing flickers).
 */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/geist/Geist-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url("../fonts/geist/Geist-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/geist/Geist-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../fonts/geist/Geist-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../fonts/space-grotesk/SpaceGrotesk-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: block;
  src: url("../fonts/space-grotesk/SpaceGrotesk-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: block;
  src: url("../fonts/space-grotesk/SpaceGrotesk-Bold.woff2") format("woff2");
}

/*
 * Telegram light/dark shell slots (D-04) — ONLY shell-level surfaces
 * are themeable (background + on-surface text pair). Map cartography
 * stays Rams-constant under both Telegram themes; Phase 3 (PX-02)
 * maps Telegram's theme params onto these two slots.
 */
:root {
  --shell-bg: var(--color-surface);
  --shell-on-surface: var(--color-on-surface);
}
@media (prefers-color-scheme: dark) {
  :root {
    --shell-bg: var(--color-surface-dark);
    --shell-on-surface: var(--color-inverse-on-surface);
  }
}