/* One palette for every page of this course that is not the video.
 *
 * These pages are also served inside the study vault
 * (mohamedattiadev.github.io/excalidraw-vault) in an iframe on the chapter
 * page, so they are its colours, not their own: the tokens below are the ones
 * in that site's quartz.config.yaml, under the names the two stylesheets here
 * were already written against. Change a colour there, change it here, and the
 * embed keeps looking like one page instead of two.
 *
 * vault token   ->  name here
 *   light           --bg
 *   lightgray       --line
 *   gray            --faint
 *   darkgray        --dim
 *   dark            --ink
 *   secondary       --accent
 *
 * --surface and --surfaceUp have no token over there, because the vault has no
 * panels to raise. They are mixed from --bg to sit one and two steps above it.
 *
 * Both themes, always. The vault has a light/dark toggle and an embedded page
 * that ignored it would be the exact thing this is meant to stop; theme.js sets
 * data-theme on <html> from the toggle, and everything below hangs off that. */

:root {
  --bg: #faf8ff;
  --surface: #ffffff;
  --surfaceUp: #f2ecfd;
  --line: #e8e3f0;
  --ink: #2a1f47;
  --dim: #4a3d6b;
  --faint: #a89cc0;
  --accent: #7b5cd6;
  --accentHover: #6a49c9;
  --accentSoft: rgba(123, 92, 214, 0.12);
  --onAccent: #ffffff;
  --selection: rgba(123, 92, 214, 0.28);

  /* Code colours, for the playground's editors. These are github-light and
     github-dark, which is what the study vault highlights its own code blocks
     with, so the same snippet reads the same in the chapter and in the editor
     sitting next to it. */
  --tok-comment: #6e7781;
  --tok-tag: #cf222e;
  --tok-selector: #cf222e;
  --tok-atrule: #cf222e;
  --tok-attr: #8250df;
  --tok-prop: #8250df;
  --tok-string: #0a3069;
  --tok-number: #0550ae;
  --tok-value: #24292f;
  --tok-meta: #6e7781;
  --tok-punct: #57606a;

  --head: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --sans: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular,
    "DejaVu Sans Mono", "Liberation Mono", Menlo, Consolas, monospace;
}

/* The vault's dark tokens, with one deliberate change: its `gray` is #5d4f7a,
   which is a fine colour for a muted word in a sentence and too dark for a
   column of line numbers down the side of an editor. --faint is lifted a step
   so the gutter stays readable. Nothing else moves. */
:root[data-theme="dark"] {
  --bg: #1a1625;
  --surface: #221c33;
  --surfaceUp: #2a2340;
  --line: #2e2740;
  --ink: #ece6f8;
  --dim: #c4b8e0;
  --faint: #6d5f8e;
  --accent: #a78bfa;
  --accentHover: #c4b5fd;
  --accentSoft: rgba(167, 139, 250, 0.16);
  --onAccent: #1a1625;
  --selection: rgba(167, 139, 250, 0.32);

  --tok-comment: #8b949e;
  --tok-tag: #ff7b72;
  --tok-selector: #ff7b72;
  --tok-atrule: #ff7b72;
  --tok-attr: #d2a8ff;
  --tok-prop: #d2a8ff;
  --tok-string: #a5d6ff;
  --tok-number: #79c0ff;
  --tok-value: #e6edf3;
  --tok-meta: #8b949e;
  --tok-punct: #9198a1;
}

/* Without javascript there is no data-theme, so follow the machine instead.
   The page is still readable, it just cannot be switched. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1a1625;
    --surface: #221c33;
    --surfaceUp: #2a2340;
    --line: #2e2740;
    --ink: #ece6f8;
    --dim: #c4b8e0;
    --faint: #6d5f8e;
    --accent: #a78bfa;
    --accentHover: #c4b5fd;
    --accentSoft: rgba(167, 139, 250, 0.16);
    --onAccent: #1a1625;
    --selection: rgba(167, 139, 250, 0.32);
    --tok-comment: #8b949e;
    --tok-tag: #ff7b72;
    --tok-selector: #ff7b72;
    --tok-atrule: #ff7b72;
    --tok-attr: #d2a8ff;
    --tok-prop: #d2a8ff;
    --tok-string: #a5d6ff;
    --tok-number: #79c0ff;
    --tok-value: #e6edf3;
    --tok-meta: #8b949e;
    --tok-punct: #9198a1;
  }
}

body {
  font-family: var(--sans);
}

h1,
h2,
h3 {
  font-family: var(--head);
}

/* ---------- the light/dark button ---------- */

/* Only ever drawn on a page that is not in an iframe. Inside the vault the
   vault's own toggle drives this page, and a second switch two inches from the
   first one is how u end up with two of them disagreeing. */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surfaceUp);
  color: var(--dim);
  cursor: pointer;
  flex: none;
}

.theme-toggle:hover {
  color: var(--ink);
  border-color: var(--accent);
}

.theme-toggle svg {
  width: 15px;
  height: 15px;
  display: block;
}

.theme-toggle .moon {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .sun {
  display: none;
}

:root[data-theme="dark"] .theme-toggle .moon {
  display: block;
}

/* A page with no bar to put it in gets it floated in the corner. */
.theme-toggle.floating {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 20;
  background: var(--surface);
}

/* ---------- one focus ring for both pages ---------- */

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- the code colours, applied ---------- */

/* Only the playground has an editor, but the tokens live here with the rest of
   the palette so there is still exactly one file to change a colour in. */

.t-comment { color: var(--tok-comment); font-style: italic; }
.t-tag { color: var(--tok-tag); }
.t-selector { color: var(--tok-selector); }
.t-atrule { color: var(--tok-atrule); }
.t-attr { color: var(--tok-attr); }
.t-prop { color: var(--tok-prop); }
.t-string { color: var(--tok-string); }
.t-number { color: var(--tok-number); }
.t-value { color: var(--tok-value); }
.t-meta { color: var(--tok-meta); }
.t-punct { color: var(--tok-punct); }