@font-face {
  font-family: "Inter";
  font-weight: 400;
  font-style: normal;
  src: url('../fonts/Inter/Inter-Regular.ttf') format('truetype');
}
@font-face {
  font-family: "Inter";
  font-weight: 600;
  font-style: normal;
  src: url('../fonts/Inter/Inter-SemiBold.ttf') format('truetype');
}

:root {
  /* ── Backgrounds ─────────────────────────────────────── */
  --bg-base:     #161b22;
  --bg-surface:  #1c2128;
  --bg-elevated: #22272e;
  --bg-overlay:  #2d333b;

  /* ── Brand accent ────────────────────────────────────── */
  --accent:        #E2013D;
  --accent-hover:  #C30235;
  --accent-subtle: rgba(226, 1, 61, 0.12);

  /* ── Text ────────────────────────────────────────────── */
  --text-primary:   rgba(255, 255, 255, 0.93);
  --text-secondary: rgba(255, 255, 255, 0.62);
  --text-muted:     rgba(255, 255, 255, 0.35);

  /* ── Borders ─────────────────────────────────────────── */
  --border:       rgba(255, 255, 255, 0.10);
  --border-focus: #E2013D;

  /* ── Status colours ──────────────────────────────────── */
  --color-success: #3FB950;
  --color-danger:  #F85149;
  --color-warning: #D29922;
  --color-info:    #58A6FF;

  /* ── HTTP method colours ─────────────────────────────── */
  --method-get:    #3FB950;
  --method-post:   #F0883E;
  --method-put:    #58A6FF;
  --method-patch:  #BC8CFF;
  --method-delete: #F85149;

  /* ── Typography ──────────────────────────────────────── */
  --font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-xs: 12px;
  --font-s:  13px;
  --font-m:  15px;
  --font-l:  18px;
  --font-xl: 22px;

  /* ── Spacing ─────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── Radius ──────────────────────────────────────────── */
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;

  /* ── Shadows ─────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);

  /* ── Layout ──────────────────────────────────────────── */
  --sidebar-width: 260px;
  --header-height: 48px;
}