/*
 * Global app styles bridging our component code to modern-sk tokens.
 *
 * Our components reference semantic --color-* names; modern-sk ships its own
 * token names (--ink, --fg-*, --steel-*, --lime, --hair). These aliases map
 * one to the other. They are `var()` references, so they resolve at the use
 * site and follow the active [data-theme] (dark/light) automatically.
 */
:root {
  --color-bg: var(--ink);
  --color-surface-1: var(--ink-raised);
  --color-surface-2: var(--steel-800);
  --color-surface-3: var(--steel-700);
  --color-text-1: var(--fg-1);
  --color-text-2: var(--fg-2);
  --color-text-3: var(--fg-3);
  --color-accent: var(--lime);
  --color-border: var(--hair);
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--fg-1);
  /* Paint the themed background immediately. The inline theme script in
     index.html (see rsbuild.config.ts) sets [data-theme] before first paint, so
     --color-bg resolves to the right value here before React mounts #root and
     layers the .modern-sk-felt grain on top — no flash of white. */
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

/* #root carries .modern-sk-felt (set in index.tsx) → grained --ink background.
   Ensure scrollable content fills the viewport above the grain overlay. */
#root {
  display: flex;
  flex-direction: column;
}