/* Design tokens — cartographic light palette */
:root {
  /* Surface */
  --color-bg: #f8f7f2;             /* paper */
  --color-bg-alt: #ffffff;
  --color-bg-tint: #eef3f1;        /* soft mint paper */
  --color-bg-sunken: #ecebe4;

  /* Ink */
  --color-text: #1d2a33;
  --color-text-muted: #56636d;
  --color-text-subtle: #7d8892;

  /* Brand */
  --color-primary: #156c6a;         /* deep teal — water */
  --color-primary-strong: #0f4f4d;
  --color-primary-soft: #d8ece9;

  --color-accent: #c9682b;          /* copper — contour line */
  --color-accent-soft: #f8e1cf;

  --color-blue: #2a6cb0;            /* ocean blue */
  --color-green: #5b8d3a;           /* terrain green */
  --color-violet: #6a4fb3;          /* boundary violet */
  --color-amber: #c89318;           /* sand amber */

  /* Borders & shadows */
  --color-border: #d9d6cd;
  --color-border-strong: #b8b3a6;
  --shadow-sm: 0 1px 2px rgba(20, 30, 40, 0.05);
  --shadow-md: 0 4px 14px rgba(20, 30, 40, 0.08);
  --shadow-lg: 0 18px 40px rgba(20, 30, 40, 0.12);

  /* Code */
  --code-bg: #f1efe6;
  --code-bg-block: #fbfaf4;
  --code-border: #e2dfd2;
  --code-text: #1d2a33;
  --code-keyword: #156c6a;
  --code-string: #5b8d3a;
  --code-number: #c9682b;
  --code-comment: #8a8676;
  --code-function: #2a6cb0;
  --code-class: #6a4fb3;

  /* Layout */
  --container-max: 1400px;
  --container-prose-max: 78ch;
  --header-height: 64px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 18px;

  /* Type */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;

  /* Transitions */
  --t-fast: 120ms ease;
  --t-med: 220ms ease;
}