/* Design tokens (dark set). Change values here only; components.css and site.css read roles, never hex. */
:root {
  color-scheme: dark;

  /* Color roles */
  --ink:         #e2e8ef;  /* body text, headings */
  --muted:       #93a1b2;  /* secondary text */
  --primary:     #3df5e0;  /* links, buttons, h3 */
  --primary-ink: #0e141b;  /* text on primary */
  --accent:      #5aa9ff;  /* sequence: course steps */
  --accent-bg:   #102338;
  --critical:    #f58b8b;
  --critical-bg: #3d1717;
  --warn:        #ffcf5c;  /* not decided yet, notices */
  --warn-bg:     #3a2d12;
  --border:      #2b3746;
  --surface:     #0e141b;  /* page background */
  --surface-2:   #1d2733;  /* bands, chips */
  --card:        #161e28;
  --code-bg:     #0b1016;
  --code-fg:     #e2e8ef;
  --row-hover:   #1a232f;
  --glow:        rgba(61, 245, 224, .35);

  /* Type */
  --font-sans: "Inter", "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Segoe UI", sans-serif;
  --font-mono: "Roboto Mono", "Menlo", monospace;
  --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 20px;
  --fs-body: 16px;
  --lh-body: 1.75;

  /* Shape and layout (8px grid) */
  --radius: 8px;
  --shadow: 0 8px 24px rgba(0, 0, 0, .5);
  --content-max: 1120px;
  --space: 8px;
}