/* Design No. 04 - colorways. Verbatim overrides from
   staging/design-04/variants/colorway-variants/, rescoped under
   [data-colorway]; .cw-tag dropped. Base (styles.css) IS this
   published page (link-pattern round, no drift possible).
   Default is the base palette (Original). */

/* Original - verbatim override from the design-04 colorway round */

:root[data-colorway="original"] {
  --cream: #f5f3f0;
  --brown: #3a3531;
  --ink: #141414;
  --rose: #a0857e;
}

/* Onyx - verbatim override from the design-04 colorway round */

:root[data-colorway="onyx"] {
  --cream: #211e1a;
  --brown: #262320;
  --ink: #ece7de;
  --rose: #b49b6f;
}
[data-colorway="onyx"] body { background: #171512; }
[data-colorway="onyx"] .site-header { background: #171512; }
[data-colorway="onyx"] .intro { background: #171512; }
[data-colorway="onyx"] .faq { background: #171512; }
[data-colorway="onyx"] .scatter::before {
  background: linear-gradient(to top, #171512 0%, rgba(23, 21, 18, 0) 100%);
}
[data-colorway="onyx"] .btn-outline-light:hover { background: #fff; color: #171512; }
[data-colorway="onyx"] .btn-outline-dark:hover { background: var(--ink); color: #171512; }
[data-colorway="onyx"] .btn-solid { background: var(--ink); color: #171512; border-color: var(--ink); }
[data-colorway="onyx"] .btn-solid:hover { background: #fff; border-color: #fff; color: #171512; }
[data-colorway="onyx"] .site-footer { color: var(--ink); }
[data-colorway="onyx"] .inquiry-form input, [data-colorway="onyx"] .inquiry-form textarea {
  background: #26231f;
  border-color: #4a453e;
  color: var(--ink);
}
[data-colorway="onyx"] .inquiry-form ::placeholder { color: #98917f; }
[data-colorway="onyx"] .addon-light { background: #f7f4ef; color: #171512; }
[data-colorway="onyx"] .addon-light .btn-outline-dark { color: #171512; }
[data-colorway="onyx"] .addon-light .btn-outline-dark:hover { background: #171512; color: #f7f4ef; }
@media (max-width: 800px) {
html[data-colorway="onyx"].js .site-header nav a { color: var(--ink); }
[data-colorway="onyx"] .menu-open .menu-toggle span { background: var(--ink); }
}

/* After Dark - verbatim override from the design-04 colorway round */

:root[data-colorway="after-dark"] {
  --cream: #191e25;
  --brown: #202731;
  --ink: #e6ebf2;
  --rose: #8fb3d9;
}
[data-colorway="after-dark"] body { background: #0f1216; }
[data-colorway="after-dark"] .site-header { background: #0f1216; }
[data-colorway="after-dark"] .intro { background: #0f1216; }
[data-colorway="after-dark"] .faq { background: #0f1216; }
[data-colorway="after-dark"] .scatter::before {
  background: linear-gradient(to top, #0f1216 0%, rgba(15, 18, 22, 0) 100%);
}
[data-colorway="after-dark"] .btn-outline-light:hover { background: #fff; color: #0f1216; }
[data-colorway="after-dark"] .btn-outline-dark:hover { background: var(--ink); color: #0f1216; }
[data-colorway="after-dark"] .btn-solid { background: var(--ink); color: #0f1216; border-color: var(--ink); }
[data-colorway="after-dark"] .btn-solid:hover { background: #fff; border-color: #fff; color: #0f1216; }
[data-colorway="after-dark"] .site-footer { color: var(--ink); }
[data-colorway="after-dark"] .inquiry-form input, [data-colorway="after-dark"] .inquiry-form textarea {
  background: #1c222b;
  border-color: #3e4a5a;
  color: var(--ink);
}
[data-colorway="after-dark"] .inquiry-form ::placeholder { color: #8593a5; }
[data-colorway="after-dark"] .addon-light { background: #f2f5f9; color: #0f1216; }
[data-colorway="after-dark"] .addon-light .btn-outline-dark { color: #0f1216; }
[data-colorway="after-dark"] .addon-light .btn-outline-dark:hover { background: #0f1216; color: #f2f5f9; }
@media (max-width: 800px) {
html[data-colorway="after-dark"].js .site-header nav a { color: var(--ink); }
[data-colorway="after-dark"] .menu-open .menu-toggle span { background: var(--ink); }
}

/* Cherry - verbatim override from the design-04 colorway round */

:root[data-colorway="cherry"] {
  --cream: #7a1220;
  --brown: #440a12;
  --ink: #231012;
  --rose: #f0b0a6;
}
[data-colorway="cherry"] .site-header { background: #530b16; }
[data-colorway="cherry"] .site-header a { color: #f7e9e6; }
[data-colorway="cherry"] .menu-toggle span { background: #f7e9e6; }
[data-colorway="cherry"] .inquire { background: #440a12; color: #f7e9e6; }
[data-colorway="cherry"] .inquiry-form input, [data-colorway="cherry"] .inquiry-form textarea {
  background: #521018;
  border-color: #7e3038;
  color: #f7e9e6;
}
[data-colorway="cherry"] .inquiry-form ::placeholder { color: #c4938e; }
[data-colorway="cherry"] .btn-solid { background: #f7e9e6; color: #440a12; border-color: #f7e9e6; }
[data-colorway="cherry"] .btn-solid:hover { background: #fff; border-color: #fff; color: #440a12; }
[data-colorway="cherry"] .site-footer { color: #f7e9e6; }
@media (max-width: 800px) {
html[data-colorway="cherry"].js .site-header nav a { color: #f7e9e6; }
}
[data-colorway="cherry"] .packages { color: #f7e9e6; }
[data-colorway="cherry"] .packages .btn-outline-dark { color: #f7e9e6; }
[data-colorway="cherry"] .packages .btn-outline-dark:hover { background: #f7e9e6; color: var(--cream); }

/* Packages ledger (2026-07-21 kit redesign): retint the ledger's neutral
   hairlines, ghost numerals, hover tint, and muted copy per colorway.
   Original keeps the base values from styles.css. Cherry's --ink is dark
   by design, so its price/CTA pieces get explicit light overrides. */

:root[data-colorway="onyx"] {
  --pk-hairline: #3a352f;
  --pk-ghost: #403a33;
  --pk-ghost-hover: #b49b6f;
  --pk-hover: #262320;
  --pk-muted: #b3aa9d;
}

:root[data-colorway="after-dark"] {
  --pk-hairline: #303a48;
  --pk-ghost: #35404f;
  --pk-ghost-hover: #8fb3d9;
  --pk-hover: #202731;
  --pk-muted: #a4afc0;
}

:root[data-colorway="cherry"] {
  --pk-hairline: #963240;
  --pk-ghost: #8f2734;
  --pk-ghost-hover: #f0b0a6;
  --pk-hover: #851c2b;
  --pk-muted: #e8cdc8;
}
[data-colorway="cherry"] .pk-price,
[data-colorway="cherry"] .pk-price .price,
[data-colorway="cherry"] .pk-cta { color: #f7e9e6; }
[data-colorway="cherry"] .pk-cta i { background: #f7e9e6; }
/* The "From" label is var(--brown) in the base; on the dark schemes that
   melts into the section background, so retint it to each scheme's muted. */
[data-colorway="onyx"] .pk-price,
[data-colorway="after-dark"] .pk-price { color: var(--pk-muted); }