/* Three tones, warm, neutral and yellow, each in light and dark, shared by
   every page. theme.js sets <html data-tone="warm|neutral|yellow" 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;
}

/* yellow: the warm page, with slate buttons, a slate footer and the yellow
   eyebrow rule. */
html[data-tone="yellow"] {
  --choc: #333F48;
  --choc-hover: #3F4D58;
  --footer: #2B2B2B;
}
/* yellow dark: the neutral blacks, with lighter panels on the page */
html[data-theme="dark"][data-tone="yellow"] {
  --choc: #4A5A66;
  --choc-hover: #566874;
  --ink-rgb: 236,236,236;
  --paper: #121212;
  --surface: #1E1E1E;
  --surface-rgb: 30,30,30;
  --frame: #2A2A2A;
  --tint-a: #1E1E1E;
  --tint-b: #121212;
  --soft: #181818;
  --soft-rgb: 24,24,24;
  --flat-ink: #ECECEC;
  --flat-tint: #1E1E1E;
  --flat-tint-2: #121212;
  --footer: #2B2B2B;
}

/* yellow light: a page between the warm beige and a light grey, with white
   panels on it */
html[data-tone="yellow"][data-theme="light"] {
  --paper: #F5F4F1;
  --footer: #333F48;
  --tint-a: #fff;
  --tint-b: #F5F4F1;
  --flat-tint: #fff;
  --flat-tint-2: #F5F4F1;
}
html[data-tone="yellow"][data-theme="light"],
html[data-tone="yellow"][data-theme="light"] body,
html[data-tone="yellow"][data-theme="light"] [data-pf-root] { --pf-page: var(--paper) !important; }
html[data-tone="yellow"][data-theme="light"] body { background: var(--paper) !important; }

/* 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; }

/* warm dark: the filled buttons turn white with dark text. The contact
   panel's button keeps its own look. */
html[data-tone="warm"][data-theme="dark"] [style*="var(--choc"]:not([data-r="contact-cta"]),
html[data-tone="warm"][data-theme="dark"] .tailor .go {
  background: #fff !important; border-color: #fff !important; color: #15110E !important;
}
html[data-tone="warm"][data-theme="dark"] [style*="var(--choc"]:not([data-r="contact-cta"]) * { color: #15110E !important; }

/* yellow: the footer and contact panel take the footer colour and the
   eyebrow rule turns yellow */
html[data-tone="yellow"] [data-r="footer"],
html[data-tone="yellow"] .pnl[data-r="contact"],
html[data-tone="yellow"][data-theme="dark"] .nav-menu > div { background: var(--footer) !important; }
html[data-tone="yellow"] .eyebrow { border-bottom-color: #FDDA24 !important; }

/* yellow: the filled buttons become two tone, ink text over a thick yellow
   rule, the eyebrow's mark made heavier */
html[data-tone="yellow"] [style*="var(--choc"]:not([data-r="contact-cta"]),
html[data-tone="yellow"] .tailor .go {
  background: transparent !important; color: rgb(var(--ink-rgb)) !important;
  border: 0 !important; border-bottom: 4px solid #FDDA24 !important; border-radius: 0 !important;
  padding: 12px 2px 10px !important; box-shadow: none !important;
}
html[data-tone="yellow"] [style*="var(--choc"]:not([data-r="contact-cta"]) * { color: rgb(var(--ink-rgb)) !important; }
html[data-tone="yellow"] [style*="var(--choc"]:not([data-r="contact-cta"]):hover,
html[data-tone="yellow"] .tailor .go:hover { border-bottom-color: #E3B400 !important; }

/* yellow: in the hero the yellow rule leads, and the deck link steps back to
   quiet text with a hairline, further away, both lines on one baseline */
html[data-tone="yellow"] [data-r="hero-actions"] { align-items: flex-end !important; gap: 36px !important; }
html[data-tone="yellow"] [data-r="hero-actions"] > a[data-gate-link] {
  color: rgba(var(--ink-rgb),.6) !important; font-weight: 500 !important;
  border-bottom: 1px solid rgba(var(--ink-rgb),.28) !important; padding: 12px 0 10px !important;
}
html[data-tone="yellow"] [data-r="hero-actions"] > a[data-gate-link]:hover { color: rgb(var(--ink-rgb)) !important; border-bottom-color: rgb(var(--ink-rgb)) !important; }

/* yellow: the About facts card is white with a hard offset shadow in the
   footer colour */
html[data-tone="yellow"] [data-r="credits"] { background: var(--surface) !important; box-shadow: 8px 8px 0 0 var(--footer) !important; }
html[data-tone="yellow"][data-theme="dark"] [data-r="credits"] { box-shadow: 8px 8px 0 0 var(--choc) !important; }

/* neutral dark: the footer, contact panel and Work menu are black, not navy */
html[data-tone="neutral"][data-theme="dark"] [data-r="footer"],
html[data-tone="neutral"][data-theme="dark"] .nav-menu > div,
html[data-tone="neutral"][data-theme="dark"] .pnl[data-r="contact"] { background: #000 !important; }

/* the About page's next work panel washes yellow on hover, which is the
   warm tone's. the others wash in their own colours. */
html[data-tone="neutral"] [data-r="about-next"]:hover,
html[data-theme="dark"] [data-r="about-next"]:hover {
  background: linear-gradient(rgba(var(--ink-rgb),.04), rgba(var(--ink-rgb),.04)), var(--flat-tint) !important;
}
html[data-tone="yellow"][data-theme="light"] [data-r="about-next"]:hover {
  background: linear-gradient(rgba(51,63,72,.05), rgba(51,63,72,.05)), var(--flat-tint) !important;
}

/* and its arrow takes each tone's mark: yellow's own yellow, neutral's ink */
html[data-tone="yellow"] [data-r="about-next"] a[style*="var(--pf-accent)"] { color: #FDDA24 !important; }
html[data-tone="neutral"] [data-r="about-next"] a[style*="var(--pf-accent)"] { color: rgb(var(--ink-rgb)) !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); }