/* Two tones, warm and neutral, each in light and dark, shared by every page.
   theme.js sets <html data-tone="warm|neutral" data-theme="light|dark">
   before first paint.

   Page colours are written as variables with the warm light value as the
   fallback, e.g. rgba(var(--ink-rgb,32,31,29),.5) or var(--surface,#fff), so
   warm light renders exactly as the pages were designed. The other three
   swap the values below.

   The page runtime sets its palette variables (--pf-*) inline on <body>, and
   each page sets --flat-tint in its own :root, so the overrides carry
   !important or a more specific selector. */

/* warm light: the original beige page */
:root {
  color-scheme: light;
  --ink-rgb: 32,31,29;
  --paper: #FAF8F3;
  --surface: #fff;
  --surface-rgb: 255,255,255;
  --frame: #e7e5de;
  --tint-a: #F4F0E7;
  --tint-b: #EDE7DB;
  --soft: #F2F0EA;
  --soft-rgb: 242,240,234;
  --choc: #2E2018;
  --choc-hover: #3D2B1F;
}

/* warm dark: brown blacks */
html[data-theme="dark"] {
  color-scheme: dark;
  --ink-rgb: 237,231,222;
  --paper: #15110E;
  --surface: #1E1915;
  --surface-rgb: 30,25,21;
  --frame: #2C241E;
  --tint-a: #241D18;
  --tint-b: #2C241E;
  --soft: #1A1512;
  --soft-rgb: 26,21,18;
  --flat-ink: #EDE7DE;
  --flat-tint: #241D18;
  --flat-tint-2: #2C241E;
  --error: #E8968C;
}

html[data-tone="neutral"] {
  /* the contrast fills (buttons, footer, the Work menu) take a dark navy */
  --choc: #0F2E4F;
  --choc-hover: #173D66;
}

/* neutral light: a white page with light grey panels on it */
html[data-tone="neutral"][data-theme="light"] {
  --paper: #fff;
  --frame: #EDEDED;
  --tint-a: #F7F7F7;
  --tint-b: #F1F1F1;
  --soft: #fff;
  --soft-rgb: 255,255,255;
  --flat-tint: #F7F7F7;
  --flat-tint-2: #F1F1F1;
}

/* neutral dark: the same structure, a near black page with dark grey panels */
html[data-tone="neutral"][data-theme="dark"] {
  --ink-rgb: 236,236,236;
  --paper: #121212;
  --surface: #1E1E1E;
  --surface-rgb: 30,30,30;
  --frame: #2A2A2A;
  --tint-a: #1E1E1E;
  --tint-b: #262626;
  --soft: #181818;
  --soft-rgb: 24,24,24;
  --flat-ink: #ECECEC;
  --flat-tint: #1E1E1E;
  --flat-tint-2: #262626;
}

/* the runtime's own palette follows the tokens everywhere but warm light */
html[data-tone="neutral"],
html[data-tone="neutral"] body,
html[data-tone="neutral"] [data-pf-root],
html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] [data-pf-root] {
  --pf-bg: var(--surface) !important;
  --pf-bg-soft: rgba(var(--soft-rgb),.9) !important;
  --pf-page: var(--paper) !important;
}
html[data-tone="neutral"] body,
html[data-theme="dark"] body { background: var(--paper) !important; }

html[data-theme="dark"],
html[data-theme="dark"] body,
html[data-theme="dark"] [data-pf-root] {
  --pf-panel-bg: var(--surface) !important;
  --pf-panel-line: rgba(var(--ink-rgb),.14) !important;
  --pf-accent-deep: rgb(var(--ink-rgb)) !important;
  --pf-accent-hover: rgb(var(--ink-rgb)) !important;
  --pf-accent-text: rgb(var(--ink-rgb)) !important;
}

/* the Work dropdown was filled with the ink, which turns light in dark mode.
   it takes the footer's chocolate instead so its white text still reads. */
html[data-theme="dark"] .nav-menu > div { background: var(--choc) !important; }

/* logos are dark marks on transparent, so they flip to light ones */
html[data-theme="dark"] [data-r="logos"] img { filter: grayscale(1) invert(1) opacity(.6) !important; }

/* ── the theme switch ────────────────────────────────────────────────────── */
.theme-switch {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px;
  border: 1px solid rgba(var(--ink-rgb),.16); border-radius: 999px;
  vertical-align: middle; margin: -6px 0;
}
.theme-switch button {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: rgba(var(--ink-rgb),.55); cursor: pointer;
  transition: background .2s, color .2s;
}
.theme-switch button:hover { color: rgb(var(--ink-rgb)); }
.theme-switch button:focus-visible { outline: 2px solid #176EBF; outline-offset: 1px; }
.theme-switch button[aria-pressed="true"] { background: rgba(var(--ink-rgb),.1); color: rgb(var(--ink-rgb)); }
.theme-switch svg { width: 15px; height: 15px; display: block; }

/* in the phone menu it sits on its own row with words beside the icons */
.nav-sheet .theme-switch { margin: 6px 10px 0; padding: 3px; }
.nav-sheet .theme-switch button { width: auto; height: 40px; padding: 0 14px; gap: 8px; border-radius: 999px;
  font: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.nav-sheet .theme-switch button::after { content: attr(title); }

/* the tone choice sits in the same switch, after a thin rule */
.theme-switch .tone-rule { width: 1px; height: 16px; margin: 0 3px; background: rgba(var(--ink-rgb),.16); }
.theme-switch .tone-dot { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(32,31,29,.18); }
/* the phone menu and the header menu both put the modes on one row and the
   tones on the next, with words beside the icons */
.nav-sheet .theme-switch,
.theme-menu .theme-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-radius: 22px; box-sizing: border-box; }
.nav-sheet .theme-switch { width: calc(100% - 20px); }
.nav-sheet .theme-switch button { padding: 0 8px; }
.nav-sheet .theme-switch .tone-rule,
.theme-menu .theme-switch .tone-rule { display: none; }
.nav-sheet .theme-switch .tone-dot { border-radius: 50% !important; }

/* in the header it is one round button showing the current mode */
.theme-menu { position: relative; display: inline-block; vertical-align: middle; margin: -6px 0; }
.theme-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: rgba(var(--ink-rgb),.62);
  border: 1px solid rgba(var(--ink-rgb),.16); transition: color .2s, border-color .2s, background .2s;
}
.theme-trigger:hover,
.theme-trigger[aria-expanded="true"] { color: rgb(var(--ink-rgb)); border-color: rgba(var(--ink-rgb),.32); }
.theme-trigger:focus-visible { outline: 2px solid #176EBF; outline-offset: 1px; }
.theme-trigger svg { width: 15px; height: 15px; display: none; }
html[data-theme-pref="light"] .theme-trigger .ti-light,
html[data-theme-pref="dark"] .theme-trigger .ti-dark,
html[data-theme-pref="system"] .theme-trigger .ti-system { display: block; }

/* and the choices open in a small card under it */
.theme-menu .theme-switch {
  display: none; position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  width: 300px; margin: 0; padding: 4px; border-radius: 16px;
  background: var(--surface); box-shadow: 0 12px 32px -12px rgba(20,19,18,.35);
}
html[data-theme-menu-open] .theme-menu .theme-switch { display: grid; }
.theme-menu .theme-switch button { width: auto; height: 36px; padding: 0 8px; gap: 8px; border-radius: 999px;
  font: inherit; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.theme-menu .theme-switch button::after { content: attr(title); }