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

:root {
  /* Surfaces */
  --bg-canvas: #090b10;
  --bg-elevated: #0d1118;
  --bg-window: #0d1118;
  --bg-header: rgba(9, 11, 16, 0.88);
  --bg-drawer: #0b0e14;
  --bg-card: #10151e;
  --bg-card-featured: linear-gradient(180deg, #131c26 0%, #0f141d 100%);
  --bg-callout: #0e131b;

  /* Borders */
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.13);
  --border-hover: rgba(255, 255, 255, 0.18);
  --border-emerald: rgba(24, 183, 128, 0.34);

  /* Text */
  --text-primary: #f3f5f8;
  --text-secondary: #9aa4b2;
  --text-muted: #697586;

  /* Primary Accent & Semantic Status */
  --accent-emerald: #18b780;
  --accent-emerald-strong: #139e6e;
  --accent-emerald-light: #3fd49f;
  --accent-emerald-tint: rgba(24, 183, 128, 0.1);
  --accent-amber: #e59922;
  --accent-danger: #e05252;

  /* Brand Identity */
  --brand-vibes: #48ce9f;
  --brand-tagline: #e8eef5;

  /* Typography */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  /* Radii */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 9999px;

  /* Layout & Motion */
  --container-width: 1200px;
  --header-height: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.16s var(--ease-out);
  --transition-smooth: 0.24s var(--ease-out);
}

@media (max-width: 420px) {
  :root {
    --header-height: 64px;
  }
}