/* Seven Global palette (design-system/web/tokens.css) mapped onto Scalar's theme
   variables. The reference is always dark, like the app. */

@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-400.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-500.ttf") format("truetype");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-600.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("fonts/Manrope-700.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}

:root {
  --scalar-font: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --scalar-font-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --scalar-radius: 8px;
  --scalar-radius-lg: 12px;
  --scalar-radius-xl: 16px;
}

body {
  margin: 0;
  background: #08090a;
}

.dark-mode,
.light-mode {
  /* text: ivory to neutral */
  --scalar-color-1: #f4f1e8;
  --scalar-color-2: #d9d6cd;
  --scalar-color-3: #a7a69e;
  --scalar-color-disabled: #62635d;
  --scalar-color-ghost: #777870;
  --scalar-color-accent: #dfc85f;

  /* surfaces: canvas, default, hover, raised */
  --scalar-background-1: #08090a;
  --scalar-background-2: #101110;
  --scalar-background-3: #171812;
  --scalar-background-4: #1d1b10;
  --scalar-background-accent: #dfc85f1f;

  --scalar-border-color: #2a2b26;

  /* primary action: gold */
  --scalar-button-1: #dfc85f;
  --scalar-button-1-color: #08090a;
  --scalar-button-1-hover: #cdae3d;

  /* HTTP methods and status colors */
  --scalar-color-green: #62d49a;
  --scalar-color-red: #f28b8b;
  --scalar-color-yellow: #f0c46b;
  --scalar-color-blue: #91b8ef;
  --scalar-color-orange: #e8a25c;
  --scalar-color-purple: #c4a5f0;

  --scalar-scrollbar-color: #3b3c35;
  --scalar-scrollbar-color-active: #62635d;
  --scalar-shadow-1: 0 1px 3px 0 #0000004d;
  --scalar-shadow-2: 0 12px 32px #00000080, 0 0 0 1px #2a2b26;
  --scalar-lifted-brightness: 1.25;
  --scalar-backdrop-brightness: 0.6;
}

/* Sidebar */
.dark-mode,
.light-mode {
  --scalar-sidebar-background-1: #101110;
  --scalar-sidebar-color-1: #f4f1e8;
  --scalar-sidebar-color-2: #a7a69e;
  --scalar-sidebar-border-color: #2a2b26;
  --scalar-sidebar-item-hover-background: #141512;
  --scalar-sidebar-item-hover-color: #f4f1e8;
  --scalar-sidebar-item-active-background: #1d1b10;
  --scalar-sidebar-color-active: #f3e5a2;
  --scalar-sidebar-search-background: #08090a;
  --scalar-sidebar-search-border-color: #2a2b26;
  --scalar-sidebar-search-color: #a7a69e;
}

/* Focus stays visible and gold, as in the app. */
:focus-visible {
  outline: 2px solid #dfc85f;
  outline-offset: 2px;
}