/* maruko · design tokens
 * Every colour is declared once for both schemes with light-dark(); the root element's
 * color-scheme decides which half applies. The palette is ferd.ca's greys and crimson,
 * moved from its off-white onto cream paper. Change the look here; the stylesheet never
 * carries a raw colour value.
 */
:root {
  color-scheme: light dark;

  /* ── Paper ── */
  --color-paper:    light-dark(oklch(97% 0.012 95),   oklch(19% 0.012 95));  /* the page */
  --color-paper-2:  light-dark(oklch(94.5% 0.014 95), oklch(23% 0.013 95));  /* blockquotes, contents box */
  --color-paper-3:  light-dark(oklch(90% 0.018 95),   oklch(28% 0.014 95));  /* Mermaid notes and tags */
  --color-code-bg:  light-dark(oklch(99% 0.006 95),   oklch(22% 0.012 95));  /* code sits a shade lighter than the page */
  --color-rule:     light-dark(oklch(89% 0.012 95),   oklch(33% 0.012 95));  /* table and code borders */
  --color-rule-2:   light-dark(oklch(80% 0.012 90),   oklch(45% 0.012 90));  /* dotted underlines */

  /* ── Ink ── */
  --color-ink:      light-dark(oklch(25% 0.008 95),   oklch(93% 0.008 95));  /* wordmark, section headings, footer rule */
  --color-ink-2:    light-dark(oklch(32% 0.008 95),   oklch(87% 0.008 95));  /* running text */
  --color-neutral:  light-dark(oklch(45% 0.010 95),   oklch(76% 0.010 95));  /* code, quotes, footer links, list bullets */
  --color-muted:    light-dark(oklch(53% 0.012 90),   oklch(68% 0.010 90));  /* links, dates, menu */
  --color-muted-2:  light-dark(oklch(66% 0.010 90),   oklch(56% 0.010 90));  /* the current menu item */

  /* ── Accent: crimson, for the quote marks, page titles and the greeting ── */
  --color-accent:     light-dark(oklch(58% 0.219 16),  oklch(70% 0.19 16));
  --color-focus:      var(--color-accent);
  --color-selection:  light-dark(oklch(90% 0.06 16),   oklch(36% 0.08 16));
  --color-code-hl:    light-dark(oklch(94% 0.024 95),  oklch(28% 0.016 95));  /* hl_lines */

  /* ── Semantic: alerts ── */
  --color-note:       var(--color-neutral);
  --color-tip:        light-dark(oklch(50% 0.11 150),  oklch(72% 0.11 150));
  --color-important:  light-dark(oklch(50% 0.13 300),  oklch(72% 0.11 300));
  --color-warning:    light-dark(oklch(60% 0.14 75),   oklch(78% 0.13 80));
  --color-caution:    var(--color-accent);

  /* ── Chart colours: Mermaid gitGraph branches, pies ── */
  --color-chart-1:    var(--color-accent);
  --color-chart-2:    light-dark(oklch(50% 0.13 250),  oklch(72% 0.12 250));
  --color-chart-3:    light-dark(oklch(52% 0.12 150),  oklch(74% 0.12 150));
  --color-chart-4:    light-dark(oklch(58% 0.14 75),   oklch(80% 0.13 85));
  --color-chart-5:    light-dark(oklch(52% 0.14 300),  oklch(74% 0.12 300));
  --color-chart-6:    light-dark(oklch(55% 0.11 200),  oklch(75% 0.10 200));

  /* ── Type: Lora bold italic for the wordmark and headings, PT Sans for everything you read,
        IBM Plex Mono for dates and code. Latin subsets are self-hosted; CJK falls through to system fonts. ── */
  --font-display: "Lora", Georgia, "Times New Roman", serif;
  --font-body: "PT Sans", "Trebuchet MS", "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, "PingFang SC", "Noto Sans CJK SC", monospace;

  /* ── Sizes: 15px interface, 18px running text ── */
  --text-xs:       0.75rem;      /* 12px  date above a post title */
  --text-sm:       0.84375rem;   /* 13.5px footer */
  --text-base:     0.9375rem;    /* 15px  tables, contents, metadata */
  --text-body:     1.125rem;     /* 18px  paragraphs, lists, the index */
  --text-h4:       1.125rem;
  --text-h3:       1.171875rem;  /* 18.75px */
  --text-h2:       1.3125rem;    /* 21px */
  --text-title:    1.6875rem;    /* 27px  post titles and the greeting */
  --text-nav:      1.125rem;
  --text-wordmark: clamp(2.5rem, 1.8rem + 2vw, 3.125rem);   /* 40px → 50px */

  --lh-body:    1.4;
  --lh-heading: 1.25;
  --lh-mono:    1.45;
  --lh-ui:      1.6;

  /* ── Layout: one column, 960px at most, 80% of the viewport below that ── */
  --measure: 60rem;

  --rule-hair: 1px;

  /* ── Motion ── */
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-micro: 120ms;
  --dur-short: 200ms;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }