/* palette.css — the one colour vocabulary, for the app and for pages
 * =====================================================================
 * Six palettes. Each is a designed pairing, so there is no combination
 * where something looks broken — that constraint IS the product, and it
 * is the reason this file exists separately from everything that uses it.
 *
 * Every block matches BOTH :root and .sr-page, which is what lets one
 * palette dress the whole of Baobab AND a published page. A .sr-page
 * carrying its own data-palette wins inside its own subtree, so the
 * editor chrome can be night while the page being designed is clay and
 * neither fights the other.
 *
 * Written out per palette rather than derived with color-mix(): a derived
 * colour is not a designed colour. earth reproduces the app's original
 * light theme exactly and night reproduces its dark, so nothing regressed
 * by moving onto this.
 *
 * Loaded by index.html, builder.html, site.html and theater.html — before
 * their own stylesheets, since those resolve against these names. Listed
 * in the Dockerfile COPY allowlist; if it 404s, everything is unstyled.
 *
 * Each palette names, in order:
 *   surfaces   paper (page) / card (raised) / tint (wash) / sunk (well)
 *   ink        ink (body) / soft / mute / faint
 *   page       accent (structure) / warm (highlight) / cover (hero)
 *   rules      rule / rule-soft / rule-strong
 *   primary    the do-the-thing colour, its deep + tint, and the ink on it
 *   highlight  the second accent role, deep/soft/tint, and the ink on it
 *   chrome     overlay / bar / bar-strong (translucent) / scrim (backdrop)
 * ===================================================================== */

/* iOS/Android paint a grey flash over anything tapped unless told not to.
   Palette rule: no browser-chosen colour ever appears — every surface loads
   this file, so the flash dies everywhere at once. Text selection inside
   inputs and articles is untouched; this only kills the tap overlay. */
* { -webkit-tap-highlight-color: transparent; }

/* earth is also the bare default, so the page is correct before any
   script has run and there is no flash of an unthemed document. */
:root, :root[data-palette="earth"],
.sr-page, .sr-page[data-palette="earth"] {
  --pg-paper: #FDFCF7; --pg-card: #FFFFFF; --pg-tint: #F6F1E6; --pg-sunk: #FAF6EC;
  --pg-ink: #1A1A1A; --pg-soft: #3A3A3A; --pg-mute: #6E6A60; --pg-faint: #8B8577;
  --pg-accent: #2D5016; --pg-warm: #C9A24F;
  --pg-cover: linear-gradient(160deg, #2D5016 0%, #4a6b2a 46%, #6B4423 100%);
  --pg-rule: #E5DFD2; --pg-rule-soft: #EFEAD9; --pg-rule-strong: #C9C0A8;
  --pg-primary: #2D5016; --pg-primary-deep: #1F3A0F; --pg-primary-tint: #E4EBD8; --pg-on-primary: #F4ECD8;
  --pg-highlight: #6B4423; --pg-highlight-deep: #4A2E16; --pg-highlight-soft: #C9A87C;
  --pg-highlight-tint: #EADDC8; --pg-on-highlight: #F4ECD8;
  --pg-overlay: rgba(253, 252, 247, 0.78); --pg-bar: rgba(253, 252, 247, 0.92);
  --pg-bar-strong: rgba(253, 252, 247, 0.96); --pg-scrim: rgba(46, 36, 25, 0.34);
}

:root[data-palette="clay"], .sr-page[data-palette="clay"] {
  --pg-paper: #FFF9F2; --pg-card: #FFFFFF; --pg-tint: #F9EDE3; --pg-sunk: #FDF3EA;
  --pg-ink: #241713; --pg-soft: #4A342C; --pg-mute: #6E564B; --pg-faint: #9B8175;
  --pg-accent: #B5503E; --pg-warm: #6B4423;
  --pg-cover: linear-gradient(160deg, #B5503E 0%, #C97B54 50%, #6B4423 100%);
  --pg-rule: #EEDDD0; --pg-rule-soft: #F5E8DD; --pg-rule-strong: #D9C0AD;
  --pg-primary: #B5503E; --pg-primary-deep: #8E3B2C; --pg-primary-tint: #F7E0D8; --pg-on-primary: #FFF6EF;
  --pg-highlight: #6B4423; --pg-highlight-deep: #4A2E16; --pg-highlight-soft: #C9A87C;
  --pg-highlight-tint: #F0E1D2; --pg-on-highlight: #FFF6EF;
  --pg-overlay: rgba(255, 249, 242, 0.80); --pg-bar: rgba(255, 249, 242, 0.93);
  --pg-bar-strong: rgba(255, 249, 242, 0.96); --pg-scrim: rgba(36, 23, 19, 0.36);
}

:root[data-palette="grove"], .sr-page[data-palette="grove"] {
  --pg-paper: #F4F7F2; --pg-card: #FFFFFF; --pg-tint: #E7EEE2; --pg-sunk: #EDF2EA;
  --pg-ink: #16210F; --pg-soft: #33452B; --pg-mute: #5D7052; --pg-faint: #7E8C77;
  --pg-accent: #1F3A0F; --pg-warm: #8FA68E;
  --pg-cover: linear-gradient(160deg, #1F3A0F 0%, #4d6b3f 55%, #8FA68E 100%);
  --pg-rule: #DCE5D6; --pg-rule-soft: #E8EFE3; --pg-rule-strong: #C1CFBA;
  --pg-primary: #1F3A0F; --pg-primary-deep: #16290A; --pg-primary-tint: #DCE8D4; --pg-on-primary: #F2F7EE;
  --pg-highlight: #6B7F5E; --pg-highlight-deep: #4C5C42; --pg-highlight-soft: #A9BCA2;
  --pg-highlight-tint: #DFE8DA; --pg-on-highlight: #F2F7EE;
  --pg-overlay: rgba(244, 247, 242, 0.80); --pg-bar: rgba(244, 247, 242, 0.93);
  --pg-bar-strong: rgba(244, 247, 242, 0.96); --pg-scrim: rgba(22, 33, 15, 0.36);
}

/* night is the app's dark theme — the green-black "void", not a neutral
   black. Its structural accent stays gold because gold on that black is
   the best thing in the system; primary lifts to a brighter green so it
   clears contrast against it. */
:root[data-palette="night"], .sr-page[data-palette="night"] {
  --pg-paper: #0E1207; --pg-card: #161D0F; --pg-tint: #18200F; --pg-sunk: #141A0D;
  --pg-ink: #E8EFDD; --pg-soft: #CBD6BC; --pg-mute: #90A07E; --pg-faint: #6E7B5E;
  --pg-accent: #C9A24F; --pg-warm: #D4694F;
  --pg-cover: linear-gradient(160deg, #2D5016 0%, #C9A24F 120%);
  --pg-rule: #2C3720; --pg-rule-soft: #222C18; --pg-rule-strong: #3A4A29;
  --pg-primary: #5FA046; --pg-primary-deep: #4C8438; --pg-primary-tint: #1C2A12; --pg-on-primary: #0E1207;
  --pg-highlight: #C9A24F; --pg-highlight-deep: #A8852F; --pg-highlight-soft: #E0C77A;
  --pg-highlight-tint: #2A2410; --pg-on-highlight: #14110D;
  --pg-overlay: rgba(14, 18, 7, 0.82); --pg-bar: rgba(14, 18, 7, 0.92);
  --pg-bar-strong: rgba(14, 18, 7, 0.96); --pg-scrim: rgba(8, 11, 5, 0.78);
}

:root[data-palette="bark"], .sr-page[data-palette="bark"] {
  --pg-paper: #FBF4E2; --pg-card: #FFFDF6; --pg-tint: #F2E7CE; --pg-sunk: #F7EFDA;
  --pg-ink: #2A1B0D; --pg-soft: #4A2E16; --pg-mute: #7A6242; --pg-faint: #9C8461;
  --pg-accent: #4A2E16; --pg-warm: #C9A87C;
  --pg-cover: linear-gradient(160deg, #4A2E16 0%, #9C6B37 55%, #C9A87C 100%);
  --pg-rule: #E7D8B8; --pg-rule-soft: #F0E5CC; --pg-rule-strong: #D2BC94;
  --pg-primary: #4A2E16; --pg-primary-deep: #34200F; --pg-primary-tint: #EADDC8; --pg-on-primary: #FBF4E2;
  --pg-highlight: #9C6B37; --pg-highlight-deep: #7A5228; --pg-highlight-soft: #C9A87C;
  --pg-highlight-tint: #F0E2C9; --pg-on-highlight: #FFFDF6;
  --pg-overlay: rgba(251, 244, 226, 0.80); --pg-bar: rgba(251, 244, 226, 0.93);
  --pg-bar-strong: rgba(251, 244, 226, 0.96); --pg-scrim: rgba(42, 27, 13, 0.38);
}

:root[data-palette="river"], .sr-page[data-palette="river"] {
  --pg-paper: #FDFCF7; --pg-card: #FFFFFF; --pg-tint: #EAF0F6; --pg-sunk: #F5F8FB;
  --pg-ink: #14202E; --pg-soft: #2E4256; --pg-mute: #5B7085; --pg-faint: #7E8FA1;
  --pg-accent: #3E5C8A; --pg-warm: #C9A24F;
  --pg-cover: linear-gradient(160deg, #3E5C8A 0%, #6C8CB8 55%, #C9A24F 120%);
  --pg-rule: #DBE3EC; --pg-rule-soft: #E9EFF5; --pg-rule-strong: #BCCAD9;
  --pg-primary: #3E5C8A; --pg-primary-deep: #2B4568; --pg-primary-tint: #DEE8F3; --pg-on-primary: #F7FAFD;
  --pg-highlight: #C9A24F; --pg-highlight-deep: #A8852F; --pg-highlight-soft: #E0C77A;
  --pg-highlight-tint: #F3E9D2; --pg-on-highlight: #1A1408;
  --pg-overlay: rgba(253, 252, 247, 0.80); --pg-bar: rgba(253, 252, 247, 0.93);
  --pg-bar-strong: rgba(253, 252, 247, 0.96); --pg-scrim: rgba(20, 32, 46, 0.36);
}

/* Elevation. Warm brown-tinted over paper; plain black and much stronger
   on night, because a brown shadow over near-black is invisible. */
:root, .sr-page {
  --pg-shadow-1: 0 1px 2px rgba(74, 46, 22, 0.04), 0 2px 8px rgba(74, 46, 22, 0.04);
  --pg-shadow-2: 0 4px 14px rgba(74, 46, 22, 0.10), 0 2px 4px rgba(74, 46, 22, 0.05);
  --pg-shadow-3: 0 18px 48px rgba(74, 46, 22, 0.16), 0 6px 12px rgba(74, 46, 22, 0.08);
}
:root[data-palette="night"], .sr-page[data-palette="night"] {
  --pg-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 2px 8px rgba(0, 0, 0, 0.30);
  --pg-shadow-2: 0 4px 14px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.35);
  --pg-shadow-3: 0 18px 48px rgba(0, 0, 0, 0.55), 0 6px 12px rgba(0, 0, 0, 0.40);
}

/* The swatch — the control that shows a palette instead of naming it.
   Lives here, not in a shell, because the app's Options panel and the
   editor's theme tray are the same control and must not drift. */
/* 44px, not the 34px it was: the swatch IS the button, and a 34px button is
   below the thumb floor on both the Options panel and the editor's tray. */
.pal-swatch {
  width: 44px; height: 44px; padding: 0; border-radius: 11px; position: relative;
  border: 1px solid var(--pg-rule); background: var(--pg-paper);
  overflow: hidden; cursor: pointer; flex: 0 0 auto;
}
.pal-swatch::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 46%;
  background: var(--pg-accent);
}
.pal-swatch.on { box-shadow: 0 0 0 2px var(--pg-ink); border-color: var(--pg-ink); }