/* Devanka / Ankasum design tokens. Five brand colors, one accent.
   Contrast checked: ink/paper 14.4, ink-2/paper 5.7, fir/paper 6.8, clay-text/paper >4.5;
   dark: text/bg 14.3, accent/bg 6.3, ink-2/bg 6.9. Stone #8A8F98 is the brand swatch for decorative hairlines only (2.96:1 on Paper);
   --rule-strong carries meaning (diagram boxes, arrows) and passes 3:1 non-text contrast: light 3.42, dark 3.62. */
:root {
  color-scheme: light dark;

  /* Brand */
  --ink:   #1E2329;
  --paper: #F6F4EF;
  --stone: #8A8F98;
  --fir:   #2E5E4E;
  --clay:  #B5543A;

  /* Roles (light) */
  --bg: var(--paper);
  --bg-sunk: #ECE9E2;        /* code blocks, table heads */
  --text: var(--ink);
  --text-2: #5B616A;         /* secondary text; Stone darkened for AA */
  --rule: #CFCCC4;           /* hairlines */
  --rule-strong: #7F848D;    /* Stone darkened to 3.4:1 for WCAG 1.4.11 */
  --accent: var(--fir);
  --accent-text: var(--fir);
  --alert: var(--clay);
  --alert-text: #A34A33;     /* Clay darkened for AA text */
  --focus: var(--fir);
  --selection: #D5E2DB;

  /* Type */
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* Scale: 1.25 ratio from 1.0625rem body, fluid at the top end */
  --fs-xs: 0.8125rem;   /* 13px: mono meta, captions */
  --fs-sm: 0.9375rem;   /* 15px: tables, footnotes */
  --fs-base: 1.0625rem; /* 17px: body */
  --fs-md: 1.25rem;     /* lead paragraph, h4 */
  --fs-lg: 1.5625rem;   /* h3 */
  --fs-xl: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);  /* h2 */
  --fs-2xl: clamp(2.25rem, 1.6rem + 3vw, 3.75rem);   /* page title */

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  --tracking-tight: -0.015em;

  /* Spacing: 4px base */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Layout */
  --measure: 66ch;          /* prose line length */
  --page-max: 75rem;        /* 1200px */
  --gutter: 1rem;           /* 16px at 360px; grows below */
  --margin-col: 11rem;      /* left reference column on wide screens */

  /* Rules */
  --hair: 1px;
  --rule-w: 1px;
  --rule-heavy: 2px;
  --radius: 2px;            /* almost square; never pills */
}

@media (min-width: 48rem) { :root { --gutter: 2rem; } }
@media (min-width: 72rem) { :root { --gutter: 3rem; } }

/* Dark: same hues, lightened. Applies automatically; [data-theme] allows a forced choice later. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15181C;
    --bg-sunk: #1D2126;
    --text: #E8E6E1;
    --text-2: #9CA1A9;
    --rule: #2E333A;
    --rule-strong: #6B717B;
    --accent: #6FA58C;
    --accent-text: #6FA58C;
    --alert: #E0876C;
    --alert-text: #E0876C;
    --focus: #6FA58C;
    --selection: #2A4A3E;
  }
}
:root[data-theme="dark"] {
  --bg: #15181C;
  --bg-sunk: #1D2126;
  --text: #E8E6E1;
  --text-2: #9CA1A9;
  --rule: #2E333A;
  --rule-strong: #6B717B;
  --accent: #6FA58C;
  --accent-text: #6FA58C;
  --alert: #E0876C;
  --alert-text: #E0876C;
  --focus: #6FA58C;
  --selection: #2A4A3E;
}