/* Isaac's Well palettes (docs/research/6-Color.md, its last JSON block), shared by the website mock and the web app mock.
 * Dependency-free: load it after the page's own stylesheets. The page's <head> sets html[data-palette] before first paint
 * from localStorage 'iw-palette' (palette-pill.js writes it); no attribute means Ink & Linen.
 *
 * 1. Fonts: each palette's display serif, and its body sans where it suits the website template (all self-hosted, latin).
 * 2. Roles (--iw-*): one block per palette, straight from the JSON. They are registered colours, so a change of palette
 *    eases over 250 ms on the root alone (no element transitions are touched), and not at all under reduced motion.
 * 3. The website template's tokens (--l-*, from landing.css) mapped onto the roles.
 * 4. The palette pill (palette-pill.js). */

/* ---------------------------------------------------------------- 1. fonts
 * The template's serif (Instrument Serif) is very condensed: these faces set the same text 21-42% wider. size-adjust
 * scales each to within about 3% of its width, so the tuned heading wraps hold (the glyphs read a little smaller, on
 * the template's fixed line heights). Public Sans at 96% matches the template sans' width and x-height. */
@font-face { font-family: 'IW Libre Caslon Text'; src: url('fonts/libre-caslon-text-400.woff2') format('woff2'); font-weight: 400; font-display: swap; size-adjust: 72.6%; }
@font-face { font-family: 'IW Alegreya'; src: url('fonts/alegreya-400.woff2') format('woff2'); font-weight: 400; font-display: swap; size-adjust: 85%; }
@font-face { font-family: 'IW Fraunces'; src: url('fonts/fraunces-400.woff2') format('woff2'); font-weight: 400; font-display: swap; size-adjust: 73.9%; }
@font-face { font-family: 'IW Literata'; src: url('fonts/literata-400.woff2') format('woff2'); font-weight: 400; font-display: swap; size-adjust: 73.2%; }
@font-face { font-family: 'IW Public Sans'; src: url('fonts/public-sans-var.woff2') format('woff2'); font-weight: 100 900; font-display: swap; size-adjust: 96%; }
@font-face { font-family: 'IW Atkinson Hyperlegible Next'; src: url('fonts/atkinson-hyperlegible-next-var.woff2') format('woff2'); font-weight: 200 800; font-display: swap; }

/* ---------------------------------------------------------------- 2. roles */
@property --iw-bg { syntax: '<color>'; inherits: true; initial-value: #f6f3ec; }
@property --iw-surface { syntax: '<color>'; inherits: true; initial-value: #fffdf9; }
@property --iw-text { syntax: '<color>'; inherits: true; initial-value: #1b2230; }
@property --iw-muted { syntax: '<color>'; inherits: true; initial-value: #545e6e; }
@property --iw-primary { syntax: '<color>'; inherits: true; initial-value: #27406a; }
@property --iw-secondary { syntax: '<color>'; inherits: true; initial-value: #6f7f96; }
@property --iw-accent { syntax: '<color>'; inherits: true; initial-value: #a4552c; }
@property --iw-night { syntax: '<color>'; inherits: true; initial-value: #11161f; }
@property --iw-night-surface { syntax: '<color>'; inherits: true; initial-value: #1a212d; }
@property --iw-night-text { syntax: '<color>'; inherits: true; initial-value: #ece8df; }
@property --iw-night-muted { syntax: '<color>'; inherits: true; initial-value: #a9b1bd; }
@property --iw-night-primary { syntax: '<color>'; inherits: true; initial-value: #9db4d8; }
@property --iw-success { syntax: '<color>'; inherits: true; initial-value: #2f6a45; }
@property --iw-warning { syntax: '<color>'; inherits: true; initial-value: #8a5a00; }
@property --iw-affirmed-tint { syntax: '<color>'; inherits: true; initial-value: #e6ebf3; }

/* Ink & Linen, the default: a letter of commendation, dark ink on good paper, sealed in copper */
:root, [data-palette="ink-linen"] {
  --iw-bg: #f6f3ec; --iw-surface: #fffdf9; --iw-text: #1b2230; --iw-muted: #545e6e;
  --iw-primary: #27406a; --iw-secondary: #6f7f96; --iw-accent: #a4552c;
  --iw-night: #11161f; --iw-night-surface: #1a212d; --iw-night-text: #ece8df; --iw-night-muted: #a9b1bd; --iw-night-primary: #9db4d8;
  --iw-success: #2f6a45; --iw-warning: #8a5a00; --iw-affirmed-tint: #e6ebf3;
  --iw-font-display: 'IW Libre Caslon Text';
  --iw-font-body: 'IW Public Sans';
}
/* Clay & Pitcher: Rebekah's clay jar, and the water she drew for a stranger. Body: the template's sans (Alegreya Sans
   has only static weights and sets 17% narrower with a small x-height, which loosens the tuned layout). */
[data-palette="clay-pitcher"] {
  --iw-bg: #faf4ec; --iw-surface: #fffcf8; --iw-text: #2a1e18; --iw-muted: #6a5a50;
  --iw-primary: #96492c; --iw-secondary: #2c5753; --iw-accent: #d49a5c;
  --iw-night: #1c1512; --iw-night-surface: #271e19; --iw-night-text: #f3e9df; --iw-night-muted: #bfaea1; --iw-night-primary: #d6976a;
  --iw-success: #2e6a3e; --iw-warning: #8a5800; --iw-affirmed-tint: #e3eeec;
  --iw-font-display: 'IW Alegreya';
  --iw-font-body: 'IW Landing Sans';
}
/* Field at Eventide: Isaac in the field at evening (Genesis 24:63) */
[data-palette="eventide"] {
  --iw-bg: #f4f1e6; --iw-surface: #fffef9; --iw-text: #20251b; --iw-muted: #575d4b;
  --iw-primary: #4a5c33; --iw-secondary: #33506b; --iw-accent: #a97b33;
  --iw-night: #161a12; --iw-night-surface: #20261b; --iw-night-text: #eeebdf; --iw-night-muted: #b0b5a3; --iw-night-primary: #a9bf86;
  --iw-success: #1f6b57; --iw-warning: #8c5b00; --iw-affirmed-tint: #e5ebf1;
  --iw-font-display: 'IW Fraunces';
  --iw-font-body: 'IW Atkinson Hyperlegible Next';
}
/* Wellstone: the cut limestone of the wellhead and the cold dark water inside it */
[data-palette="wellstone"] {
  --iw-bg: #f2f0eb; --iw-surface: #fbfaf8; --iw-text: #161c1e; --iw-muted: #535b5e;
  --iw-primary: #1e4e54; --iw-secondary: #7d776c; --iw-accent: #9a7536;
  --iw-night: #101516; --iw-night-surface: #1a2123; --iw-night-text: #ebe9e4; --iw-night-muted: #a7b0b2; --iw-night-primary: #86b9bd;
  --iw-success: #2d6a43; --iw-warning: #8a5a00; --iw-affirmed-tint: #e2ecec;
  --iw-font-display: 'IW Literata';
  --iw-font-body: 'IW Public Sans';
}
/* Current: deep well water on parchment, with a gold glint of light on the water */
[data-palette="current"] {
  --iw-bg: #f8f2e4; --iw-surface: #ffffff; --iw-text: #0e2224; --iw-muted: #255658;
  --iw-primary: #2c6b6c; --iw-secondary: #3a8686; --iw-accent: #c5a45f;
  --iw-night: #0e2224; --iw-night-surface: #1b393b; --iw-night-text: #fdfbf5; --iw-night-muted: #b3d8d8; --iw-night-primary: #82bfbf;
  --iw-success: #15803d; --iw-warning: #b45309; --iw-affirmed-tint: #eef6f6;
  --iw-font-display: 'IW Fraunces';
  --iw-font-body: 'IW Public Sans';
}

html:root {
  transition-property: --iw-bg, --iw-surface, --iw-text, --iw-muted, --iw-primary, --iw-secondary, --iw-accent, --iw-night,
    --iw-night-surface, --iw-night-text, --iw-night-muted, --iw-night-primary, --iw-success, --iw-warning, --iw-affirmed-tint;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { html:root { transition: none; } }

/* ---------------------------------------------------------------- 3. the website template's tokens (landing.css :root)
 * html:root outranks landing.css's :root. Light roles colour the paper; the palette's dark roles colour the dark bands
 * (the hero's ground, the closing feature, the footer, the card veils). White stays white: it is text on the action
 * colour and on photographs. */
html:root {
  --l-font-serif: var(--iw-font-display), 'IW Landing Serif', 'IW Landing Serif Fallback', ui-serif, Georgia, serif;
  --l-font-sans: var(--iw-font-body), 'IW Landing Sans', 'IW Landing Sans Fallback', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --l-paper: var(--iw-bg);
  --l-paper-2: color-mix(in oklab, var(--iw-bg) 92%, var(--iw-muted));
  --l-ink: color-mix(in oklab, var(--iw-text) 85%, var(--iw-muted));
  --l-ink-strong: var(--iw-text);
  --l-ink-muted: var(--iw-muted);
  --l-ink-soft: color-mix(in oklab, var(--iw-muted) 62%, var(--iw-bg));
  --l-ink-label: color-mix(in oklab, var(--iw-muted) 35%, var(--iw-bg));
  --l-hairline: color-mix(in oklab, var(--iw-text) 16%, var(--iw-bg));
  --l-hairline-dark: color-mix(in srgb, var(--iw-muted) 20%, transparent);
  --l-dark: var(--iw-night);
  --l-dark-2: color-mix(in oklab, var(--iw-night-surface) 80%, var(--iw-night-muted));
  --l-chip-dark: color-mix(in oklab, var(--iw-night-surface) 85%, var(--iw-night-text));
  --l-glass: color-mix(in srgb, var(--iw-night) 40%, transparent);
  --l-nav-glass: color-mix(in srgb, var(--iw-text) 10%, transparent);
  --l-ring: color-mix(in srgb, var(--iw-text) 25%, transparent);
  --l-promo: color-mix(in oklab, var(--iw-accent) 24%, var(--iw-bg));
  --l-paper-40: color-mix(in srgb, var(--iw-bg) 40%, transparent);
  --l-paper-80: color-mix(in srgb, var(--iw-bg) 85%, transparent);
  --l-paper-16: color-mix(in srgb, var(--iw-bg) 16%, transparent);
  --l-scrim: color-mix(in srgb, var(--iw-night) 60%, transparent);
  --l-card-scrim: color-mix(in srgb, var(--iw-night) 60%, transparent);
  --l-card-veil: color-mix(in srgb, var(--iw-night) 72%, transparent);
  --l-card-veil-soft: color-mix(in srgb, var(--iw-night) 30%, transparent);
  --l-cta: var(--iw-primary);
  --l-cta-hover: color-mix(in oklab, var(--iw-primary) 72%, var(--iw-night));

  /* the app as drawn in the miniatures (cards, phones, the verification card) */
  --l-app-desk: var(--iw-bg);
  --l-app-desk-2: var(--l-paper-2);
  --l-app-card: var(--iw-surface);
  --l-app-ink: var(--iw-text);
  --l-app-ink-2: var(--l-ink);
  --l-app-muted: var(--iw-muted);
  --l-app-ink-4: color-mix(in oklab, var(--iw-muted) 65%, var(--iw-bg));
  --l-app-border: color-mix(in oklab, var(--iw-text) 10%, var(--iw-surface));
  --l-app-border-strong: color-mix(in oklab, var(--iw-text) 17%, var(--iw-surface));
  --l-app-brand-tint: var(--iw-affirmed-tint);
  --l-app-brand-mark: color-mix(in oklab, var(--iw-primary) 75%, #ffffff);
  --l-app-success: var(--iw-success);
  --l-app-you: var(--iw-warning);
  --l-app-you-tint: color-mix(in oklab, var(--iw-warning) 13%, #ffffff);
  --l-app-shadow-edge: color-mix(in srgb, var(--iw-text) 5%, transparent);
  --l-app-shadow-1: color-mix(in srgb, var(--iw-text) 6%, transparent);
  --l-app-shadow-2: color-mix(in srgb, var(--iw-text) 10%, transparent);
  --l-scan: color-mix(in srgb, var(--iw-primary) 28%, transparent);

  /* materials (avatars and drawings): clay is the accent, teal the primary, slate the secondary, sage the success colour */
  --l-mat-clay-hi: color-mix(in oklab, var(--iw-accent) 9%, #ffffff);
  --l-mat-clay: color-mix(in oklab, var(--iw-accent) 30%, #ffffff);
  --l-mat-clay-deep: color-mix(in oklab, var(--iw-accent) 80%, var(--iw-text));
  --l-mat-clay-45: color-mix(in srgb, var(--l-mat-clay-deep) 45%, transparent);
  --l-mat-teal-hi: color-mix(in oklab, var(--iw-primary) 9%, #ffffff);
  --l-mat-teal: color-mix(in oklab, var(--iw-primary) 24%, #ffffff);
  --l-mat-teal-deep: var(--iw-primary);
  --l-mat-teal-45: color-mix(in srgb, var(--iw-primary) 45%, transparent);
  --l-mat-slate-hi: color-mix(in oklab, var(--iw-secondary) 9%, #ffffff);
  --l-mat-slate: color-mix(in oklab, var(--iw-secondary) 26%, #ffffff);
  --l-mat-slate-deep: color-mix(in oklab, var(--iw-secondary) 80%, var(--iw-text));
  --l-mat-slate-45: color-mix(in srgb, var(--l-mat-slate-deep) 45%, transparent);
  --l-mat-sage-hi: color-mix(in oklab, var(--iw-success) 9%, #ffffff);
  --l-mat-sage: color-mix(in oklab, var(--iw-success) 24%, #ffffff);
  --l-mat-sage-deep: var(--iw-success);
  --l-mat-sage-45: color-mix(in srgb, var(--iw-success) 45%, transparent);
}

/* ---------------------------------------------------------------- 4. the palette pill (palette-pill.js) */
.iw-pal {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 2147483000;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  font-family: inherit; font-size: 14px; line-height: 20px; color: var(--iw-text);
  -webkit-font-smoothing: antialiased;
}
.iw-pal { transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
/* on a phone, while one of the page's own controls passes under the corner (palette-pill.js, data-avoid) */
.iw-pal.is-away { opacity: 0; transform: translateY(12px); pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .iw-pal { transition: none; } }
.iw-pal *, .iw-pal *::before, .iw-pal *::after { box-sizing: border-box; }
.iw-pal button { margin: 0; font: inherit; color: inherit; letter-spacing: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.iw-pal :focus-visible { outline: 2px solid var(--iw-primary); outline-offset: 2px; }
.iw-pal-sw {
  position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; overflow: hidden;
  background: var(--sw-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sw-ink) 22%, transparent);
}
.iw-pal-sw::before, .iw-pal-sw::after { content: ''; position: absolute; border-radius: 50%; }
.iw-pal-sw::before { inset: 4px 9px 4px -5px; background: var(--sw-primary); }
.iw-pal-sw::after { right: 4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; background: var(--sw-accent); }
.iw-pal-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px 0 11px; border: 0;
  border-radius: 9999px; background: color-mix(in srgb, var(--iw-surface) 86%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--iw-text) 10%, transparent), 0 6px 24px color-mix(in srgb, var(--iw-text) 14%, transparent);
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.iw-pal-toggle:hover { box-shadow: 0 0 0 1px color-mix(in srgb, var(--iw-text) 16%, transparent), 0 8px 28px color-mix(in srgb, var(--iw-text) 18%, transparent); }
.iw-pal-toggle:active { transform: scale(0.97); }
.iw-pal-name { font-weight: 500; white-space: nowrap; }
.iw-pal-chev { width: 10px; height: 10px; margin-left: -2px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.iw-pal.is-open .iw-pal-chev { transform: rotate(180deg); }
.iw-pal-list {
  display: flex; flex-direction: column; min-width: 224px; margin: 0; padding: 6px; list-style: none;
  border-radius: 20px; background: color-mix(in srgb, var(--iw-surface) 94%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--iw-text) 10%, transparent), 0 12px 40px color-mix(in srgb, var(--iw-text) 18%, transparent);
  transform-origin: 100% 100%;
}
.iw-pal-list[hidden] { display: none; }
.iw-pal-k { padding: 8px 12px 4px; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--iw-muted); }
.iw-pal-opt {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 14px;
  background: transparent; text-align: left; transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.iw-pal-opt:hover { background: color-mix(in srgb, var(--iw-text) 6%, transparent); }
.iw-pal-opt[aria-checked="true"] { background: color-mix(in srgb, var(--iw-primary) 10%, transparent); font-weight: 500; }
.iw-pal-opt .iw-pal-label { flex: 1; }
.iw-pal-tick { width: 14px; height: 14px; fill: none; stroke: var(--iw-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; visibility: hidden; }
.iw-pal-opt[aria-checked="true"] .iw-pal-tick { visibility: visible; }
@media (prefers-reduced-motion: no-preference) {
  .iw-pal.is-open .iw-pal-list { animation: iw-pal-in 200ms cubic-bezier(0, 0, 0.2, 1) both; }
}
@keyframes iw-pal-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } }
@media print { .iw-pal { display: none; } }