/* ─────────────────────────────────────────────────────────────
   Design tokens — Direction D
   Locked in D11. Colour means a layer of scripture and nothing else:
     green  = language      amber = history/place     violet = connection
   Anything that is not one of those layers (chrome, money, admin)
   is ink and grey. Do not add a colour without a layer to justify it.
   ───────────────────────────────────────────────────────────── */

:root {
  /* page shell */
  --pg-bg: #f1f2ef;
  --pg-ink: #14170f;
  --pg-soft: #52584d;
  --pg-faint: #868c80;
  --pg-line: #dfe1db;
  --pg-line-2: #eceee9;

  /* app chrome */
  --chrome: #f7f8f6;
  --chrome-2: #eef0ec;
  --chrome-3: #e0e3dd;
  --on: #13170f;
  --on-2: #4a5145;
  --on-3: #7d857a;

  /* reading surface */
  --page: #ffffff;
  --page-2: #f8faf7;
  --ink: #11150d;
  --ink-2: #484f44;
  --ink-3: #7f877b;
  --hair: #e7e9e4;
  --hair-2: #f2f4f1;

  /* the three layers */
  --g: #00845c;  --g-fg: #ffffff;  --g-soft: #d0f1e3;  --g-line: #4bc99a;
  --o: #c96a00;  --o-fg: #ffffff;  --o-soft: #ffe6c9;  --o-line: #eba55e;
  --m: #8330c4;  --m-fg: #ffffff;  --m-soft: #eee1fb;  --m-line: #b989e8;

  /* Sharing is chrome, not a layer of scripture — so it gets its own colour,
     bronze, deliberately outside the green/amber/violet meaning system. */
  --share: #9a6a1f;  --share-fg: #ffffff;

  /* type */
  --ui: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  --heb: "SBL Hebrew", "Arial Hebrew", "Times New Roman", serif;

  /* measure — prose never exceeds this, tables ignore it */
  --measure: 34rem;
  /* The reading view runs wider — at 34rem most of the column was white. */
  --measure-read: 46rem;
}

/* Dark is the reader's OS choice unless they have explicitly asked for light. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pg-bg: #101208; --pg-ink: #eceee7; --pg-soft: #a7ada0; --pg-faint: #7b8275;
    --pg-line: #2a2e25; --pg-line-2: #1f231b;
    --chrome: #171a13; --chrome-2: #1f231a; --chrome-3: #2e3327;
    --on: #eceee7; --on-2: #a9b0a2; --on-3: #7d8577;
    --page: #12150e; --page-2: #191d14;
    --ink: #eef0e9; --ink-2: #a6ada0; --ink-3: #7d8577;
    --hair: #262b1f; --hair-2: #1d2117;
    --g: #2fbe8a; --g-fg: #062b1e; --g-soft: #103228; --g-line: #2b7a5c;
    --o: #e59440; --o-fg: #331d05; --o-soft: #372513; --o-line: #8a5c26;
    --m: #b581ea; --m-fg: #2a1140; --m-soft: #2b1a3d; --m-line: #6a4694;
    --share: #c99a4a; --share-fg: #2b1d06;
  }
}

/* An explicit dark choice wins over a light OS. */
:root[data-theme="dark"] {
  --pg-bg: #101208; --pg-ink: #eceee7; --pg-soft: #a7ada0; --pg-faint: #7b8275;
  --pg-line: #2a2e25; --pg-line-2: #1f231b;
  --chrome: #171a13; --chrome-2: #1f231a; --chrome-3: #2e3327;
  --on: #eceee7; --on-2: #a9b0a2; --on-3: #7d8577;
  --page: #12150e; --page-2: #191d14;
  --ink: #eef0e9; --ink-2: #a6ada0; --ink-3: #7d8577;
  --hair: #262b1f; --hair-2: #1d2117;
  --g: #2fbe8a; --g-fg: #062b1e; --g-soft: #103228; --g-line: #2b7a5c;
  --o: #e59440; --o-fg: #331d05; --o-soft: #372513; --o-line: #8a5c26;
  --m: #b581ea; --m-fg: #2a1140; --m-soft: #2b1a3d; --m-line: #6a4694;
}