/* Ken brand theme for Scalar. Tokens from the ken-design-system skill.
   Clean, docs-appropriate variant (not the neobrutalist website mode). */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sen:wght@400;600;700;800&display=swap');

/* Shared (mode-independent) tokens: type + radii. */
:root,
.light-mode,
.dark-mode {
  --scalar-font: 'Inter', system-ui, -apple-system, sans-serif;
  --scalar-font-headings: 'Sen', 'Inter', system-ui, sans-serif;
  --scalar-font-code: 'SF Mono', 'JetBrains Mono', ui-monospace, monospace;

  --scalar-color-accent: #ff3e00;   /* brand orange */
  --scalar-button-1: #ff3e00;
  --scalar-button-1-color: #ffffff;
  --scalar-button-1-hover: #e63800;

  --scalar-radius: 10px;
  --scalar-radius-lg: 12px;
}

/* Light mode palette. */
:root,
.light-mode {
  --scalar-color-1: #262626;   /* primary text (near-black, not #000) */
  --scalar-color-2: #666666;   /* secondary text */
  --scalar-color-3: #999999;   /* muted */

  --scalar-background-1: #ffffff;
  --scalar-background-2: #f5f5f5;
  --scalar-background-3: #e5e5e5;
  --scalar-border-color: #e5e5e5;

  --scalar-color-green: #007f35;
  --scalar-color-red: #ff3e00;
  --scalar-color-yellow: #ffe750;
  --scalar-color-blue: #4f00d0;   /* brand accent (purple) */
  --scalar-color-orange: #ff3e00;
  --scalar-color-purple: #4f00d0;
}

/* Dark mode palette (default). Near-black surfaces from the Ken token
   #262626, lifted to lighter accents (lavender, brighter green) that stay
   legible on dark backgrounds. */
.dark-mode {
  --scalar-color-1: #f5f5f5;   /* primary text (off-white) */
  --scalar-color-2: #b3b3b3;   /* secondary text */
  --scalar-color-3: #808080;   /* muted */

  --scalar-background-1: #1a1a1a;   /* main canvas */
  --scalar-background-2: #262626;   /* sidebar / cards (Ken near-black) */
  --scalar-background-3: #333333;   /* raised surfaces */
  --scalar-border-color: #3a3a3a;

  --scalar-color-green: #2ea35f;
  --scalar-color-red: #ff5c33;
  --scalar-color-yellow: #ffe750;
  --scalar-color-blue: #cca4ff;   /* brand lavender (legible on dark) */
  --scalar-color-orange: #ff3e00;
  --scalar-color-purple: #cca4ff;
}

/* Headings use Sen across the reference. */
.references-rendered h1,
.references-rendered h2,
.references-rendered h3,
.references-rendered h4 {
  font-family: var(--scalar-font-headings);
}