/* =========================================================================
   Design tokens — single source of truth for the redesigned surfaces.

   Deliberately namespaced (--paper, --ink, --signal…) rather than reusing the
   legacy names (--bg-main, --accent, --text-high…). css/style.css contains
   four competing :root blocks that disagree with each other, and pages other
   than the homepage still depend on them. New names mean the new design owns
   its values outright, with no cascade fight and no risk to pages that have
   not been redesigned yet.

   Light is the default. Dark is opt-in via [data-theme="dark"] on <html>,
   which is also what src/js/modules/theme.js writes.
   ========================================================================= */

:root {
  /* ---- Surface ---- */
  --paper: #f7f9fc;        /* page ground — cool off-white, not cream */
  --card: #ffffff;         /* raised surfaces read as lifted on the ground */
  --card-sunk: #eef2f8;    /* inset wells: code, manifest rows on hover */
  --rule: #e2e8f0;         /* hairlines */
  --rule-strong: #cbd5e1;  /* dividers that need to carry weight */

  /* ---- Ink ---- */
  --ink: #0f172a;          /* near-black, cool slate bias */
  --ink-soft: #334155;     /* secondary headings */
  --ink-muted: #475569;    /* supporting copy, metadata */
  --ink-faint: #5b6779;    /* timestamps, eyebrows, metadata — 4.68:1 on
                              --paper (now 5.44:1 on the blue-tinted ground). The lighter grey this started as sat
                              at 2.94:1 and failed AA on text that carries
                              real information (release dates, section
                              labels), so it was darkened rather than kept
                              decorative. */

  /* ---- Signal: the one accent. Tech blue, chosen by the owner. ---- */
  --signal: #2563eb;
  --signal-hover: #1d4ed8;
  --on-signal: #ffffff;
  --signal-wash: #eff4ff;  /* version chips, active nav background */
  --signal-edge: #c7d7fe;

  /* ---- Semantic (status only — never decorative) ---- */
  --ok: #15803d;
  --ok-wash: #eefbf2;

  /* ---- Type ---- */
  --font-display: "Bricolage Grotesque", "Trebuchet MS", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ---- Space: a real scale, not ad-hoc px ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ---- Form ---- */
  --radius: 10px;
  --radius-sm: 6px;
  --rail-width: 264px;
  --measure: 68ch;         /* running text stays readable */
  --tap: 44px;             /* minimum touch target (WCAG 2.5.5) */
  --header-h: 60px;        /* shared sticky site header */
  /* Breakpoints (media queries cannot read custom properties, so these are
     documentation): 640px phone -> tablet, 1024px tablet -> desktop,
     1280px wide desktop. Use only these. */

  /* Shadows stay nearly invisible: on light ground, hairlines do the work
     that heavy shadows did on the dark glass design. */
  --lift: 0 1px 2px rgba(18, 22, 28, 0.04), 0 1px 1px rgba(18, 22, 28, 0.03);
  --lift-hover: 0 4px 12px rgba(18, 22, 28, 0.07), 0 1px 3px rgba(18, 22, 28, 0.04);
}

:root[data-theme="dark"] {
  --paper: #0b1220;
  --card: #111a2b;
  --card-sunk: #16213a;
  --rule: #1f2a40;
  --rule-strong: #2c3a55;

  --ink: #e5ecf6;
  --ink-soft: #c3cede;
  --ink-muted: #93a1b8;
  --ink-faint: #8593a9;    /* 6.01:1 on the dark ground */

  --signal: #60a5fa;
  --signal-hover: #93c5fd;
  --on-signal: #0b1220;
  --signal-wash: #0f1d3a;
  --signal-edge: #1e3a6e;

  --ok: #4ade80;
  --ok-wash: #10231a;

  --lift: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lift-hover: 0 4px 14px rgba(0, 0, 0, 0.5);
}

/* Viewers who never touched the toggle and whose OS asks for dark get it,
   without overriding an explicit light choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0b1220;
    --card: #111a2b;
    --card-sunk: #16213a;
    --rule: #1f2a40;
    --rule-strong: #2c3a55;

    --ink: #e5ecf6;
    --ink-soft: #c3cede;
    --ink-muted: #93a1b8;
    --ink-faint: #8593a9;    /* 6.01:1 on the dark ground */

    --signal: #60a5fa;
    --signal-hover: #93c5fd;
    --on-signal: #0b1220;
    --signal-wash: #0f1d3a;
    --signal-edge: #1e3a6e;

    --ok: #4ade80;
    --ok-wash: #10231a;

    --lift: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lift-hover: 0 4px 14px rgba(0, 0, 0, 0.5);
  }
}

/* Arabic pages: neither display face has Arabic glyphs, so both roles start
   with IBM Plex Sans Arabic (loaded by base.njk only on lang="ar" pages).
   Latin words inside Arabic text still use the regular faces next in line. */
:lang(ar) {
  --font-display: "IBM Plex Sans Arabic", "Bricolage Grotesque", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "IBM Plex Sans", Tahoma, -apple-system, "Segoe UI", sans-serif;
}