/* theme.css — niṣṭhā marketing-page palette. Load AFTER a page's inline
   <style>, then put one theme class on <body> (or on an in-page panel):

     theme-customers  tangerine ground, coffee-bean text
     theme-product    tiber-green ground, paper text
     theme-business   paper ground, coffee-bean text (also Contact / Help / Resolution)

   The pages' inline CSS still hard-codes black/white and var(--orange);
   everything below overrides it per theme. --orange is re-pointed at each
   theme's accent-for-text so existing `color: var(--orange)` rules just work. */

:root {
  --tiber: #06392F;
  --bean: #40312F;
  --tangerine: #FF6E3A;
  --paper: #FBF8F3;
  --deep-tangerine: #B8431A; /* tangerine darkened for small text on paper (≈5:1) */
}

.theme-customers {
  --bg: var(--tangerine);
  --fg: var(--bean);
  --accent: var(--bean);
  --surface: rgba(64, 49, 47, .10);
  --line: rgba(64, 49, 47, .25);
}
.theme-product {
  --bg: var(--tiber);
  --fg: var(--paper);
  --accent: var(--tangerine);
  --surface: rgba(251, 248, 243, .07);
  --line: rgba(251, 248, 243, .18);
}
.theme-business {
  --bg: var(--paper);
  --fg: var(--bean);
  --accent: var(--deep-tangerine);
  --surface: #ffffff;
  --line: rgba(64, 49, 47, .16);
}

:is(.theme-customers, .theme-product, .theme-business) {
  --orange: var(--accent);
  background: var(--bg);
  color: var(--fg);
}

/* type */
:is(.theme-customers, .theme-product, .theme-business) .headline { color: var(--fg); }
:is(.theme-customers, .theme-product, .theme-business) .tag { color: var(--accent); }
:is(.theme-customers, .theme-product, .theme-business) .body-text,
:is(.theme-customers, .theme-product, .theme-business) .faq-a,
:is(.theme-customers, .theme-product, .theme-business) .issue-a {
  color: color-mix(in srgb, var(--fg) 92%, transparent);
}
:is(.theme-customers, .theme-product, .theme-business) .back-link,
:is(.theme-customers, .theme-product, .theme-business) .faq-a a { color: var(--accent); }
:is(.theme-customers, .theme-product, .theme-business) .faq-q,
:is(.theme-customers, .theme-product, .theme-business) .issue-q { color: var(--fg); }

/* dividers and cards */
:is(.theme-customers, .theme-product, .theme-business) .faq-item,
:is(.theme-customers, .theme-product, .theme-business) .issue-item { border-top-color: var(--line); }
:is(.theme-customers, .theme-product, .theme-business) .faq-item:first-child,
:is(.theme-customers, .theme-product, .theme-business) .issue-item:first-child { border-top: none; }
:is(.theme-customers, .theme-product, .theme-business) .email-card {
  background: var(--surface);
  border-color: var(--line);
}
:is(.theme-customers, .theme-product, .theme-business) .email-card .label {
  color: color-mix(in srgb, var(--fg) 60%, transparent);
}

/* business.html scroll-pinned menu */
:is(.theme-customers, .theme-product, .theme-business) .scroll-list-item .label {
  color: color-mix(in srgb, var(--fg) 32%, transparent);
}
:is(.theme-customers, .theme-product, .theme-business) .scroll-list-item.active .label { color: var(--fg); }
:is(.theme-customers, .theme-product, .theme-business) .scroll-list-item .desc {
  color: color-mix(in srgb, var(--fg) 62%, transparent);
}
:is(.theme-customers, .theme-product, .theme-business) .scroll-visual {
  background: var(--surface);
  border-color: var(--line);
}
:is(.theme-customers, .theme-product, .theme-business) .scroll-visual-panel .v-label { color: var(--fg); }
:is(.theme-customers, .theme-product, .theme-business) .scroll-visual-panel .v-desc {
  color: color-mix(in srgb, var(--fg) 68%, transparent);
}

/* logo: the mascot is a dark portrait, so crop it round instead of showing
   a dark rectangle on a coloured page */
:is(.theme-customers, .theme-product, .theme-business) .site-nav img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
}

/* page-load cover takes the page colour instead of black */
body:is(.theme-customers, .theme-product, .theme-business) #curtain { background: var(--bg); }

/* when a page is shown inside a sliding panel, the panel is the transition */
.framed #curtain { display: none; }