/*
 * ghostmarkdown.com's shared styles (docs/LANDING.md), on every page after the kit's tokens (glacier/tokens.css).
 *
 * The site is drawn from Glacier as the app is: its type scale, spacing, radii, motion and shadows are the kit's
 * tokens, and its faces are the kit's two, Inter and JetBrains Mono, served from here (fonts/). Its colours are the
 * app's (src/app/ink.css): ink on paper, pure grey, light or dark with the system - or one of the three named themes
 * the app offers, Dawn, Boreal and Ember, whose tinted greys are the kit's own (`data-theme-preset`). A visitor picks
 * one on the home page (theme.js keeps it); every page wears it.
 *
 * The first half is what every page carries. The second is the reading column that privacy.html and
 * delete-account.html are set in, scoped under `.reading`, the class those two pages put on <html>. The home page's
 * own layout is home.css.
 */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter.woff2') format('woff2-variations');
}

@font-face {
  font-family: 'JetBrains Mono Variable';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('fonts/jetbrains-mono.woff2') format('woff2-variations');
}

/* ---- the greys: the app's pure ones, light, then dark; a named theme's are the kit's ---------------------------- */

:root {
  --g1: oklch(0.995 0 0);
  --g2: oklch(0.975 0 0);
  --g3: oklch(0.955 0 0);
  --g4: oklch(0.925 0 0);
  --g5: oklch(0.895 0 0);
  --g6: oklch(0.86 0 0);
  --g7: oklch(0.8 0 0);
  --g8: oklch(0.7 0 0);
  --g9: oklch(0.56 0 0);
  --g10: oklch(0.47 0 0);
  --g11: oklch(0.36 0 0);
  --g12: oklch(0.16 0 0);
  --lift: 0.55;
  color-scheme: light;
}

:root[data-theme='dark'] {
  --g1: oklch(0.11 0 0);
  --g2: oklch(0.14 0 0);
  --g3: oklch(0.17 0 0);
  --g4: oklch(0.205 0 0);
  --g5: oklch(0.24 0 0);
  --g6: oklch(0.28 0 0);
  --g7: oklch(0.34 0 0);
  --g8: oklch(0.44 0 0);
  --g9: oklch(0.6 0 0);
  --g10: oklch(0.69 0 0);
  --g11: oklch(0.8 0 0);
  --g12: oklch(0.965 0 0);
  --lift: 0.78;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --g1: oklch(0.11 0 0);
    --g2: oklch(0.14 0 0);
    --g3: oklch(0.17 0 0);
    --g4: oklch(0.205 0 0);
    --g5: oklch(0.24 0 0);
    --g6: oklch(0.28 0 0);
    --g7: oklch(0.34 0 0);
    --g8: oklch(0.44 0 0);
    --g9: oklch(0.6 0 0);
    --g10: oklch(0.69 0 0);
    --g11: oklch(0.8 0 0);
    --g12: oklch(0.965 0 0);
    --lift: 0.78;
    color-scheme: dark;
  }
}

/* A named theme: the kit's tinted twelve steps, which it sets for Dawn, Boreal and Ember (glacier/tokens.css). */
:root:root[data-theme-preset] {
  --g1: var(--glacier-gray-1);
  --g2: var(--glacier-gray-2);
  --g3: var(--glacier-gray-3);
  --g4: var(--glacier-gray-4);
  --g5: var(--glacier-gray-5);
  --g6: var(--glacier-gray-6);
  --g7: var(--glacier-gray-7);
  --g8: var(--glacier-gray-8);
  --g9: var(--glacier-gray-9);
  --g10: var(--glacier-gray-10);
  --g11: var(--glacier-gray-11);
  --g12: var(--glacier-gray-12);
}

/* ---- the hues: Settings' own (src/app/settings/settings.css `[data-hue]`), a shade deeper on a light page ---------- */

:root {
  --hue-blue: #0a6fe0;
  --hue-purple: #9a45c9;
  --hue-red: #dd3a30;
  --hue-graphite: #5f6368;
  --hue-coral: #c8643f;
  --hue-green: #2a9d4b;
  --hue-yellow: #b58400;
  --hue-mint: #1f9e8f;
}

:root[data-theme='dark'] {
  --hue-blue: #4ea1ff;
  --hue-purple: #c77dff;
  --hue-red: #ff6b61;
  --hue-graphite: #aeb2b8;
  --hue-coral: #f0906b;
  --hue-green: #4cd571;
  --hue-yellow: #ffd43b;
  --hue-mint: #5fe0cf;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --hue-blue: #4ea1ff;
    --hue-purple: #c77dff;
    --hue-red: #ff6b61;
    --hue-graphite: #aeb2b8;
    --hue-coral: #f0906b;
    --hue-green: #4cd571;
    --hue-yellow: #ffd43b;
    --hue-mint: #5fe0cf;
  }
}

/* ---- the page's colours, named as the app names them -------------------------------------------------------------- */

:root {
  --paper: var(--g1);
  --paper-2: var(--g3);
  --paper-3: var(--g5);
  --rule: var(--g4);
  --ink: var(--g12);
  --ink-2: var(--g11);
  /* A step darker than the app's own third ink (g9): the site's small print is read at a distance, and g9 on Dawn's
     paper and the light tints was under 4.5:1. */
  --ink-3: var(--g10);
  --ink-4: var(--g7);
  --wash: color-mix(in oklch, var(--g12) 7%, transparent);
  /* The highlighter's blue wash, the one colour among the marks (the app's `--app-mark`). */
  --mark: color-mix(in oklch, oklch(0.62 0.17 250) 34%, transparent);
  /* The app's names for the two inks, which its own components read (parts/: src/landing/parts.tsx). */
  --app-ink: var(--ink);
  --app-paper: var(--paper);
  /* What privacy.html and delete-account.html were written against. */
  --line: var(--rule);
  --sans: var(--glacier-font-sans, 'Inter Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif);
  --mono: var(--glacier-font-mono, 'JetBrains Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Words for a screen reader alone. */
.unseen {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- the reading column: privacy.html and delete-account.html ------------ */

/* On <html>, and so inherited by the body, as `html, body` set it before. */
.reading {
  line-height: 1.6;
}
.reading main {
  max-width: 42rem;
  margin: 0 auto;
  padding: 40px 16px 72px;
}
.reading header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}
.reading header img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.reading header a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}
.reading h1 {
  margin: 0 0 4px;
  font-size: 2rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.reading h2 {
  margin: 36px 0 8px;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.reading p,
.reading li {
  color: var(--ink);
}
.reading .muted {
  color: var(--ink-2);
}
.reading ul {
  padding-left: 1.2em;
}
.reading li + li {
  margin-top: 6px;
}
.reading a {
  color: inherit;
}
.reading .short {
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.reading .short ul {
  margin: 8px 0 0;
}
.reading footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}