/* Subtitld website tokens — values used across every page design */
:root {
  /* Ground */
  --bg-0: #07090b;            /* page top, header, footer */
  --bg-1: #1a232b;            /* page gradient end */
  --bg-2: #121a21;            /* long-page tail */
  --bg-card: #0f151b;         /* dark cards */
  --bg-code: #0b1015;         /* code blocks */
  --page-gradient: linear-gradient(180deg, var(--bg-0) 0px, var(--bg-1) 1100px, var(--bg-2) 100%);

  /* Slate scale (chrome) */
  --slate-900: #304251;
  --slate-800: #3e5363;
  --slate-700: #4a5f70;
  --slate-600: #566f84;
  --grey-600: #6a7483;
  --grey-500: #7a8494;

  /* Text */
  --text-strong: #eef4f8;     /* headings */
  --text: #b8cee0;            /* sky: body, links, labels */
  --text-soft: #9fb4c6;       /* secondary body */
  --text-muted: #7a8494;      /* captions, meta */
  --nav: #8fa6ba;

  /* Accents */
  --sky: #b8cee0;
  --sky-light: #c8dbe9;
  --green: #55d43f;
  --green-light: #67ff4d;
  --on-green: #0c1a08;
  --danger: #c55252;
  --danger-text: #f0b4b4;

  /* Surfaces with alpha */
  --surface: rgba(48, 66, 81, .28);
  --surface-soft: rgba(48, 66, 81, .16);
  --hairline: rgba(184, 206, 224, .08);
  --border: rgba(184, 206, 224, .14);

  /* Buttons */
  --btn-primary: linear-gradient(180deg, var(--green-light), var(--green));
  --btn-primary-hover: linear-gradient(180deg, #7dff66, #5fe048);
  --btn-default: linear-gradient(180deg, var(--slate-700), var(--slate-800));
  --btn-default-hover: linear-gradient(180deg, var(--slate-600), var(--slate-700));
  --btn-secondary: linear-gradient(180deg, var(--sky-light), var(--sky));  /* current-page state */

  /* Shape — never above 4px, no drop shadows */
  --radius: 2px;
  --radius-frame: 4px;

  /* Type — Montserrat only; Ubuntu Mono for code and file extensions */
  --font: 'Montserrat', sans-serif;
  --font-mono: 'Ubuntu Mono', monospace;
  --label-size: 11px;          /* ALL CAPS labels, weight 700 */
  --label-tracking: .14em;     /* .16–.18em for section eyebrows */
  --wordmark-tracking: .42em;  /* SUBTITLD, weight 300 */
  --h1: clamp(38px, 5.4vw, 64px);   /* weight 300; home hero up to 76px */
  --h2: clamp(30px, 3.6vw, 44px);   /* weight 300 */
  --container: 1200px;         /* docs pages: 1280px */
  --gutter: 24px;
}