/* app.css ─ Tailwind directives + primitive imports.
 *
 * Order matters:
 *   1. tokens (CSS custom properties for legacy callers)
 *   2. tailwind base (CSS reset)
 *   3. tailwind components
 *   4. our primitives (use tokens + can be overridden by utilities)
 *   5. tailwind utilities (highest specificity, last word)
 *   6. motion (animations + reduced-motion override)
 */

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

@tailwind base;
@tailwind components;

/* Primitives — each one ~50-200 lines, one responsibility per file */
@import "./components/sidebar.css";
@import "./components/topbar.css";
@import "./components/button.css";
@import "./components/form-controls.css";
@import "./components/field-group.css";
@import "./components/slide-panel.css";
@import "./components/card-asset.css";
@import "./components/card-operational.css";
@import "./components/list-row.css";
@import "./components/empty-state.css";
@import "./components/badge.css";
@import "./components/toast.css";

@tailwind utilities;

@import "./components/motion.css";

/* Global base — self-hosted fonts */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/fonts/jetbrains-mono-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

html {
  font-family: var(--font);
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}