/*
  Design tokens for the OctoKeep site.

  Surface, border, text, accent, danger and code colours were sampled from
  screenshots of the Walrus Memory dashboard (memory.walrus.xyz/dashboard),
  which is the layout reference for this page. The brand pair (--brand-1,
  --brand-2) belongs to OctoKeep and is used only for the wordmark, the
  mascot and focus rings, so the page reads as its own product.
  Fonts: Geist and Geist Mono, SIL OFL 1.1, self-hosted. See docs/DESIGN_NOTES.md.
*/

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/geist-mono-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;

  /* Surfaces */
  --bg: #000000;
  --surface: #151515;
  --surface-raised: #1d1d1d;
  --surface-sunken: #000000;
  --surface-hover: #1a1a1a;
  --chip: #262626;

  /* Lines */
  --border: #2b2b2b;
  --border-strong: #3a3a3a;

  /* Text */
  --text: #f5f5f2;
  --text-muted: #a3a3a3;
  --text-faint: #8c8c8c;
  --on-light: #0a0a0a;

  /* Reference accents */
  --accent: #d6f26a;
  --accent-soft: rgba(214, 242, 106, 0.42);
  --danger: #f26d6d;
  --danger-soft: rgba(242, 109, 109, 0.5);
  --button-light: #f5f5f0;

  /* OctoKeep brand, sampled from assets/OctoKeepBot-logo.png */
  --brand-1: #ff6a5c;
  --brand-2: #a35cff;
  --brand-gradient: linear-gradient(90deg, var(--brand-1) 10%, var(--brand-2) 90%);
  --focus: #ff7a6e;

  /* Code */
  --code-text: #e8e8e3;
  --code-keyword: #b49bff;
  --code-string: #e2f07c;
  --code-comment: #8c8c8c;

  /* Type */
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* Layout */
  /* Layout: the content column grows with the screen up to 1440px; past
     that, wide-screen zoom in main.css scales the whole page instead of
     leaving empty margins. */
  --header-width: 1440px;
  --content-width: 1440px;
  --gutter: clamp(16px, 4vw, 56px);
  --section-gap: 56px;
}

@media (max-width: 640px) {
  :root {
    --gutter: 16px;
    --section-gap: 40px;
  }
}