/*
 * Design tokens.
 *
 * **A palette is three colours.** `--page`, `--text` and `--accent` are the
 * only values a palette sets; everything below is mixed from them. That is what
 * makes a new palette three lines and a custom one three hex fields, and it is
 * what keeps ten palettes consistent with each other -- there is one set of
 * relationships, not ten sets of hand-tuned values that drift.
 *
 * Every name is a role rather than an appearance -- `--muted-3`, not
 * `--warm-grey` -- so no rule anywhere else knows which palette is on.
 *
 * Kind colours are the exception and are shared by every palette: proved,
 * violated and observed mean the same thing on any ground, and `src/vocab.ts`
 * remains the source of truth for what a kind is.
 */

:root {
  /* The palette. Paper, until something says otherwise. */
  --page: #f7f5f0;
  --text: #1c1a17;
  --accent: #7a6a4f;

  /*
   * Surfaces. Both are the page moved a little toward the ink, so the
   * relationship holds whichever is darker: on paper they recede, on ink they
   * lift, and in both cases they separate from the page by the same amount.
   */
  --panel: color-mix(in srgb, var(--page) 97%, var(--text));
  --companion: color-mix(in srgb, var(--page) 94%, var(--text));

  /*
   * The ink, and seven steps of it toward the page. `--prose` is a hair softer
   * than `--text`: a full-strength black on a warm page reads as a bruise.
   */
  --prose: color-mix(in srgb, var(--text) 96%, var(--page));
  --secondary: color-mix(in srgb, var(--text) 90%, var(--page));

  --muted-1: color-mix(in srgb, var(--text) 78%, var(--page));
  --muted-2: color-mix(in srgb, var(--text) 66%, var(--page));
  --muted-3: color-mix(in srgb, var(--text) 48%, var(--page));
  --muted-4: color-mix(in srgb, var(--text) 38%, var(--page));
  --muted-5: color-mix(in srgb, var(--text) 30%, var(--page));
  --muted-6: color-mix(in srgb, var(--text) 24%, var(--page));
  --muted-7: color-mix(in srgb, var(--text) 20%, var(--page));

  /* Lines and washes: the ink at low alpha, so they sit on any ground. */
  --hairline: color-mix(in srgb, var(--text) 7%, transparent);
  --border: color-mix(in srgb, var(--text) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--text) 16%, transparent);
  --border-hover: color-mix(in srgb, var(--text) 32%, transparent);

  --row-hover: color-mix(in srgb, var(--text) 3%, transparent);
  --row-hover-strong: color-mix(in srgb, var(--text) 5%, transparent);
  --row-active: color-mix(in srgb, var(--text) 6%, transparent);
  --row-active-strong: color-mix(in srgb, var(--text) 8%, transparent);

  --selection: color-mix(in srgb, var(--accent) 26%, transparent);
  --finding-wash: rgba(190, 90, 50, 0.07);
  --finding-word: rgba(255, 180, 90, 0.22);
  --addition-wash: rgba(120, 160, 110, 0.1);

  /* Kinds. Unchanged between themes on purpose. */
  --kind-proved: oklch(0.58 0.13 30);
  --kind-violated: oklch(0.72 0.12 75);
  --kind-observed: oklch(0.66 0.03 90);
  --findings-dot: oklch(0.62 0.14 40);
  --addition: oklch(0.5 0.09 150);
  --deletion: oklch(0.55 0.11 30);
  --verified: oklch(0.48 0.09 150);

  /* Type */
  /*
   * Four faces, and the split is the designer's rather than a preference.
   *
   * The manuscript is **Literata** and is deliberately exempt from the design
   * system: it is the artifact, not the chrome, which is the same reason
   * `gutter.ts` refuses to reflow prose. The chrome is **Barlow**, with
   * **Barlow Condensed** for headings and the denser labels, and codes, counts
   * and anything monospaced stay **IBM Plex Mono**.
   *
   * `--font-sans` exists because ⌘K offers IBM Plex Sans as one of three faces
   * for the *manuscript*. That used to be spelled `--font-ui`, so moving the
   * chrome to Barlow would have silently changed an author's chosen manuscript
   * face along with it -- two different questions that happened to have the
   * same answer until they didn't.
   */
  --font-prose: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ui: 'Barlow', system-ui, -apple-system, sans-serif;
  --font-heading: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --size-title: 25px;
  --size-prose: 18px;
  --size-comment: 15.5px;
  --size-14: 14px;
  --size-13-5: 13.5px;
  --size-13: 13px;
  --size-12-5: 12.5px;
  --size-12: 12px;
  --size-11-5: 11.5px;
  --size-11: 11px;
  --size-10-5: 10.5px;
  --size-10: 10px;
  --size-9-5: 9.5px;

  --leading-prose: 1.72;
  --leading-ui-prose: 1.55;

  /* Radii */
  --r-code: 4px;
  --r-button: 7px;
  --r-row: 8px;
  --r-card: 9px;
  --r-popover: 10px;
  --r-composer: 11px;
  --r-bubble: 12px;
  --r-pill: 14px;
  --r-primary: 16px;

  --shadow-popover: 0 6px 20px color-mix(in srgb, var(--text) 14%, transparent);

  /* Fixed geometry. Named because several of these are load-bearing:
     --gutter must match GUTTER_WIDTH_CH in src/editor/gutter.ts, and the
     measure steps by a fixed amount so text never reflows to fill. */
  --topbar-h: 44px;
  --statusbar-h: 34px;
  --rail-w-collapsed: 216px;
  --rail-w: 274px;
  --rail-w-wide: 288px;
  --chat-w: 320px;
  --chat-w-wide: 352px;
  --chat-rail-w: 44px;
  --companion-w: 420px;
  --companion-h: 300px;
  --gutter: 14px;
  /* The margin's card column and the channel its leader runs in. Fixed steps,
     like the measure: the pair of them is what gets centred, and the prose is
     never resized to make room. `tether.ts` carries the same two numbers and
     `manuscript.test.ts` asserts they agree. */
  --card-w: 260px;
  --tether-channel: 28px;
  /* The manuscript gutter's own width, fixed so the measure does not shift
     sideways as pills appear and go. Named `-ch` because it is sized to the
     three-character codes it holds; it was referenced twice and defined
     nowhere, so both declarations were dropped and the gutter sized itself to
     whatever was in it -- which is precisely the shifting it was added to
     stop. */
  --gutter-ch: 4ch;
  /* The measure, raised, and where the numbers now come from.

     680 put a 630px column in the middle of a 1,250px pane and left three
     hundred pixels of nothing on either side of the prose, which the author
     read as the application wasting their screen: "reduce margins greatly".

     A constant could not fix that, because a constant has to be chosen for the
     smallest window worth supporting. So the surface picks a rung off the
     ladder in `measure.ts` the first time it sees how much room it has -- 760
     on an ordinary 1,440px window, 880 at 1,600, 1,040 at 1,920 -- and holds it
     for the session. These three are what it falls back to when nothing has
     measured anything: the fixed stops the placements name, and what the
     stylesheet is asserted against.

     Fixed either way. Nothing here is a percentage or a function of the window,
     and the rung is chosen once rather than followed, so the line breaks stay
     the author's rather than their monitor's. */
  --measure-narrow: 600px;
  --measure: 760px;
  --measure-wide: 760px;
}

/*
 * The palettes. Three colours each, and nothing else: everything above is
 * mixed from them, so this list is the whole of what a palette is.
 *
 * `data-scheme` is set beside `data-palette` by `applyPalette`, and is what
 * `color-scheme` reads -- the browser paints its own scrollbars and controls
 * from it. It is declared rather than computed, because a palette sitting near
 * the middle would be guessed wrong.
 */
:root[data-palette='ink'] {
  --page: #14130f;
  --text: #e7e3d8;
  --accent: #b9a37a;
}

:root[data-palette='classy'] {
  --page: #faf8f5;
  --text: #191919;
  --accent: #7d2b3a;
}

:root[data-palette='light'] {
  --page: #ffffff;
  --text: #16181d;
  --accent: #2f6fd0;
}

:root[data-palette='sand'] {
  --page: #f2e9d8;
  --text: #3a2f1f;
  --accent: #a5713a;
}

:root[data-palette='pastel'] {
  --page: #fdf6fb;
  --text: #33303a;
  --accent: #a07bc0;
}

:root[data-palette='light-wood'] {
  --page: #f4e7d3;
  --text: #4a3520;
  --accent: #9c6b3f;
}

:root[data-palette='dark-wood'] {
  --page: #241a12;
  --text: #e8d9c3;
  --accent: #c08a4a;
}

:root[data-palette='dark'] {
  --page: #101216;
  --text: #e6e8ec;
  --accent: #6ea8fe;
}

:root[data-palette='gold'] {
  --page: #0d0d0d;
  --text: #f0e6d2;
  --accent: #d4af37;
}

:root[data-palette='mahogany'] {
  --page: #2b1512;
  --text: #efe0d2;
  --accent: #c0654a;
}

:root[data-palette='zen'] {
  --page: #f2f4ef;
  --text: #2c322c;
  --accent: #6f8a70;
}

:root[data-palette='scandinavian'] {
  --page: #fbfaf7;
  --text: #23272b;
  --accent: #4f7ea8;
}

/*
 * On a dark ground the washes need more of themselves to register, and the
 * shadow needs to be a shadow rather than a smudge. Keyed on the scheme, not on
 * the palette, so a custom dark one gets it too.
 */
:root[data-scheme='dark'] {
  --hairline: color-mix(in srgb, var(--text) 9%, transparent);
  --border: color-mix(in srgb, var(--text) 14%, transparent);
  --shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.45);
}

/* The viewer's own setting, before they have chosen inside the app. */
@media (prefers-color-scheme: dark) {
  :root:not([data-palette]) {
    --page: #14130f;
    --text: #e7e3d8;
    --accent: #b9a37a;
    --hairline: color-mix(in srgb, var(--text) 9%, transparent);
    --border: color-mix(in srgb, var(--text) 14%, transparent);
    --shadow-popover: 0 6px 20px rgba(0, 0, 0, 0.45);
    color-scheme: dark;
  }
}