/* Based And Pasted — design tokens. Dark only. */
:root {
  /* Surfaces */
  --bg: #101113;             /* page */
  --bg-deep: #0a0b0c;        /* footer bottom, top bars */
  --bg-code: #1e1e1e;        /* code block body */
  --surface: #15171a;        /* card bottom of gradient */
  --surface-raised: #1a1c20; /* card top of gradient, hover bg */
  --surface-chip: #1c1f23;   /* tag chips, inline code */
  --surface-grad: linear-gradient(180deg, #1a1c20 0%, #15171a 100%);
  --header-grad: linear-gradient(180deg, #17191c, #131518);

  /* Borders */
  --border: #22252a;         /* dividers */
  --border-strong: #262a30;  /* card borders */
  --border-chip: #2c3036;
  --border-input: #2a2e34;
  --border-hover: #4a3126;   /* orange-tinted card hover border */
  --border-accent-soft: rgba(240,115,58,.35);

  /* Accent (deep orange) */
  --accent: #d9480f;
  --accent-bright: #f0733a;
  --accent-hover: #ff8a4c;
  --accent-tint: #f0a37a;    /* type names in code */
  --accent-grad: linear-gradient(180deg, #f0733a, #d9480f);
  --accent-glow: 0 0 12px rgba(217,72,15,.45);
  --accent-bg-soft: rgba(217,72,15,.12);

  /* Text */
  --fg: #e6e4df;
  --fg-heading: #f3f1ec;
  --fg-body: #cfd2d7;        /* long-form paragraphs */
  --fg-secondary: #c9cdd3;
  --fg-muted: #a8adb5;       /* excerpts, descriptions */
  --fg-meta: #8b9099;        /* dates, labels, nav idle */
  --fg-faint: #5c626b;       /* counters, hints */
  --fg-ghost: #3f444c;       /* line-number gutter */
  --fg-divider: #3a3f46;

  /* Code (VS Code Dark Plus) */
  --code-keyword: #8b9099;
  --code-type: #f0a37a;
  --code-fn: #f3f1ec;
  --code-attr: #f0733a;
  --code-primitive: #7fb3d5;
  --code-string: #b8c59a;
  --code-number: #e2b07a;
  --code-comment: #5c626b;

  /* Type */
  --font-mono: 'Space Mono', ui-monospace, monospace;   /* headings, meta, code, nav brand */
  --font-sans: 'Figtree', system-ui, sans-serif;        /* body, buttons */
  --text-xs: 11px; --text-sm: 12px; --text-base: 13.5px; --text-md: 14px;
  --text-body: 16.5px; --text-h3: 18px; --text-h2: 22px;
  --text-h1: clamp(28px, 3.4vw, 40px); --text-hero: clamp(28px, 4vw, 46px);
  --leading-body: 1.75; --leading-code: 1.7; --tracking-heading: -0.03em; --tracking-label: 0.08em;

  /* Radii */
  --r-xs: 4px; --r-sm: 5px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-code: 0 1px 0 rgba(255,255,255,.03) inset, 0 10px 30px -14px rgba(0,0,0,.8);
  --shadow-float: 0 20px 48px -16px rgba(0,0,0,.9);
  --shadow-cta: 0 4px 12px -4px rgba(217,72,15,.6);
  --inset-hairline: inset 0 1px 0 rgba(255,255,255,.03);

  /* Spacing / layout */
  --container: 1120px; --container-prose: 760px; --container-narrow: 720px;
  --pad-x: 24px; --pad-x-mobile: 16px;
  --toc-w: 240px; --toc-gap: 56px; --header-h: 60px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-7: 28px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-18: 72px;

  /* Motion */
  --ease-out: cubic-bezier(.2,.7,.2,1);
  --ease-wipe: cubic-bezier(.65,0,.35,1);
  --dur-fast: .2s; --dur-base: .25s; --dur-page: .32s; --dur-rise: .6s;
}