/* =============================================================
   THEME B — Aspirational Abstract
   Humanist, optimistic, soft. Generous whitespace, big bold sans
   display, rounded cards, blurred gradient orbs. Drops the carto
   ornaments (contour SVG, grid, schematic compass) for a calmer,
   more product-marketing register.
   ============================================================= */

html[data-theme="B"] {
  /* --- Palette: cream + soft violet accent ---------------- */
  --paper:        #FAFAF7;
  --paper-soft:   #FFFFFF;
  --paper-deep:   #F2EFE9;
  --hairline:     #EBE9E2;
  --rule:         #DAD6CB;
  --rule-strong:  #B6B1A2;

  --ink:          #16171D;
  --ink-soft:     #44475A;
  --ink-mid:      #71757F;
  --ink-faint:    #A2A4AD;

  /* "Copper" is reused as the accent variable so existing
     selectors that reference --copper auto-pick up violet. */
  --copper:       #6B57D9;
  --copper-soft:  #9783ED;
  --copper-deep:  #4F3DB8;
  --copper-wash:  rgba(107, 87, 217, 0.07);
  --copper-hair:  rgba(107, 87, 217, 0.22);
  --copper-glow:  rgba(107, 87, 217, 0.04);

  --indigo:       #1F3A4D;
  --indigo-soft:  #3F5E76;

  /* --- Type: Inter throughout, one display weight --------- */
  --font-display: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Slightly more breathing room */
  --section-pad:  clamp(7rem, 15vh, 12rem);
  --radius:       14px;
}

/* Body backdrop with two soft gradient orbs */
html[data-theme="B"] body::before {
  background-image:
    radial-gradient(700px 600px at 88% -8%, rgba(107, 87, 217, 0.10), transparent 70%),
    radial-gradient(900px 700px at -8% 110%, rgba(247, 168, 130, 0.10), transparent 70%);
  mix-blend-mode: normal;
}

/* --- Display / typography ---------------------------------- */
html[data-theme="B"] .display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
}
html[data-theme="B"] .display em {
  font-style: normal;
  background: linear-gradient(105deg, #6B57D9 0%, #C26BAA 60%, #F7A882 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="B"] h2.display { font-size: clamp(2.5rem, 5vw, 4.75rem); }

html[data-theme="B"] .eyebrow {
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: none;
  color: var(--copper);
}
html[data-theme="B"] .eyebrow::before { display: none; }

html[data-theme="B"] .lead { color: var(--ink-soft); }
html[data-theme="B"] .body strong { color: var(--copper); font-weight: 600; }

/* --- Nav / wordmark ---------------------------------------- */
html[data-theme="B"] .wordmark__text {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
}
html[data-theme="B"] .wordmark__glyph .contour { stroke-width: 1.4; }

html[data-theme="B"] .nav.is-scrolled {
  background: rgba(250, 250, 247, 0.78);
}

/* --- Hero -------------------------------------------------- */
html[data-theme="B"] .hero__bg-grid,
html[data-theme="B"] .hero__bg-contours { display: none; }
html[data-theme="B"] .hero__bg-grain {
  background:
    radial-gradient(60% 55% at 78% 20%, rgba(107, 87, 217, 0.18), transparent 70%),
    radial-gradient(45% 40% at 12% 78%, rgba(247, 168, 130, 0.20), transparent 70%),
    radial-gradient(35% 35% at 90% 88%, rgba(194, 107, 170, 0.14), transparent 70%);
  filter: blur(0.5px);
}
html[data-theme="B"] .hero__meta { border-bottom-color: var(--hairline); }
html[data-theme="B"] .hero__year { color: var(--copper); }

html[data-theme="B"] .hero__title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  font-size: clamp(3.25rem, 11vw, 9.5rem);
}
html[data-theme="B"] .hero__title em {
  font-style: normal;
  background: linear-gradient(105deg, #6B57D9 0%, #C26BAA 60%, #F7A882 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
html[data-theme="B"] .hero__lead {
  font-weight: 400;
  color: var(--ink);
}
html[data-theme="B"] .hero__lead strong { color: var(--copper); font-weight: 600; }

/* --- Cards: ledger / stats / principles / audiences -------- */
html[data-theme="B"] .ledger,
html[data-theme="B"] .stats,
html[data-theme="B"] .principles__grid,
html[data-theme="B"] .audiences__grid {
  border: 0;
  background: transparent;
  gap: 1rem;
  padding: 0;
}
html[data-theme="B"] .ledger__cell,
html[data-theme="B"] .stats__cell,
html[data-theme="B"] .principle,
html[data-theme="B"] .audience {
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: clamp(1.75rem, 2.5vw, 2.25rem);
  box-shadow: 0 1px 2px rgba(22, 23, 29, 0.03);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease), border-color 280ms var(--ease);
}
html[data-theme="B"] .ledger__cell:hover,
html[data-theme="B"] .stats__cell:hover,
html[data-theme="B"] .principle:hover,
html[data-theme="B"] .audience:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px -18px rgba(107, 87, 217, 0.18), 0 2px 6px -2px rgba(22, 23, 29, 0.06);
  border-color: var(--copper-hair);
  background: var(--paper-soft);
}
html[data-theme="B"] .ledger__cell::before,
html[data-theme="B"] .stats__cell::before,
html[data-theme="B"] .principle::before,
html[data-theme="B"] .audience::before { display: none; }
html[data-theme="B"] .ledger__label::before {
  width: 32px;
  background: linear-gradient(90deg, #6B57D9, #F7A882);
}
html[data-theme="B"] .stats__num em {
  background: linear-gradient(105deg, #6B57D9, #F7A882);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
}

/* --- Schematic --------------------------------------------- */
html[data-theme="B"] .schematic {
  border: 1px solid var(--hairline);
  border-radius: 22px;
  background: var(--paper-soft);
  box-shadow: 0 30px 60px -40px rgba(107, 87, 217, 0.18);
}
html[data-theme="B"] .schematic::before { display: none; }
html[data-theme="B"] .schematic__mark { display: none; }
html[data-theme="B"] .schematic__name { font-weight: 700; }
html[data-theme="B"] .plane__head::after {
  background: linear-gradient(135deg, #6B57D9, #F7A882);
  box-shadow: 0 0 0 4px var(--paper-soft);
}

/* --- Service rows ------------------------------------------ */
html[data-theme="B"] .service-list { border-top: 0; }
html[data-theme="B"] .service-row {
  border-bottom: 1px solid var(--hairline);
}
html[data-theme="B"] .service-row::before {
  background: linear-gradient(180deg, #6B57D9, #F7A882);
}
html[data-theme="B"] .service-row:hover {
  background: linear-gradient(to right, rgba(107, 87, 217, 0.04), transparent 55%);
}
html[data-theme="B"] .service-row__title h3 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
}
html[data-theme="B"] .service-row__tags span {
  font-family: var(--font-sans);
  font-weight: 500;
  border-radius: var(--radius-pill);
  background: var(--paper);
}

/* --- Foundations band -------------------------------------- */
html[data-theme="B"] .foundations { background: var(--paper-deep); }
html[data-theme="B"] .foundations::before { display: none; }

/* --- Products --------------------------------------------- */
html[data-theme="B"] .product-list { border-top: 0; gap: 1rem; }
html[data-theme="B"] .product {
  background: var(--paper-soft);
  border: 1px solid var(--hairline);
  border-radius: 22px;
  padding: clamp(2rem, 3.5vw, 2.75rem);
  box-shadow: 0 1px 2px rgba(22,23,29,0.03);
}
html[data-theme="B"] .product::before {
  width: 4px;
  border-radius: 22px 0 0 22px;
}
html[data-theme="B"] .product--live::before { background: linear-gradient(180deg, #6B57D9, #F7A882); }
html[data-theme="B"] .product:hover {
  border-color: var(--copper-hair);
  box-shadow: 0 18px 38px -20px rgba(107, 87, 217, 0.20);
  background: var(--paper-soft);
}
html[data-theme="B"] .product__name {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.024em;
}
html[data-theme="B"] .product__pill { border-radius: var(--radius-pill); }
html[data-theme="B"] .product__pill--live {
  background: linear-gradient(105deg, rgba(107, 87, 217, 0.10), rgba(247, 168, 130, 0.12));
  border-color: var(--copper-hair);
}

/* --- Direction / footer ----------------------------------- */
html[data-theme="B"] .direction__contact a {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
  border-bottom-width: 2px;
}
html[data-theme="B"] .footer .wordmark__text { font-weight: 700; }
html[data-theme="B"] .opening__pullquote {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.024em;
  border-top-color: var(--hairline);
}
html[data-theme="B"] .foundations__note,
html[data-theme="B"] .products__note {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.022em;
}
html[data-theme="B"] .foundations__note em,
html[data-theme="B"] .products__note em,
html[data-theme="B"] .opening__pullquote em {
  font-style: normal;
  background: linear-gradient(105deg, #6B57D9, #F7A882);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* =============================================================
   Theme B — Dark mode
   ============================================================= */
html[data-theme="B"][data-mode="dark"] {
  --paper:        #0F1015;
  --paper-soft:   #181923;
  --paper-deep:   #0A0B10;
  --hairline:     #21232E;
  --rule:         #353849;
  --rule-strong:  #555873;

  --ink:          #F1EEE8;
  --ink-soft:     #BDBFCB;
  --ink-mid:      #80838F;
  --ink-faint:    #555863;

  --copper:       #9B85F5;
  --copper-soft:  #B5A3FF;
  --copper-deep:  #6B57D9;
  --copper-wash:  rgba(155, 133, 245, 0.10);
  --copper-hair:  rgba(155, 133, 245, 0.28);
  --copper-glow:  rgba(155, 133, 245, 0.06);
}
html[data-theme="B"][data-mode="dark"] body::before {
  background-image:
    radial-gradient(700px 600px at 88% -8%, rgba(155, 133, 245, 0.16), transparent 70%),
    radial-gradient(900px 700px at -8% 110%, rgba(247, 168, 130, 0.10), transparent 70%);
}
html[data-theme="B"][data-mode="dark"] .hero__bg-grain {
  background:
    radial-gradient(60% 55% at 78% 20%, rgba(155, 133, 245, 0.22), transparent 70%),
    radial-gradient(45% 40% at 12% 78%, rgba(247, 168, 130, 0.16), transparent 70%),
    radial-gradient(35% 35% at 90% 88%, rgba(194, 107, 170, 0.12), transparent 70%);
}
html[data-theme="B"][data-mode="dark"] .display em,
html[data-theme="B"][data-mode="dark"] .hero__title em,
html[data-theme="B"][data-mode="dark"] .stats__num em,
html[data-theme="B"][data-mode="dark"] .opening__pullquote em,
html[data-theme="B"][data-mode="dark"] .foundations__note em,
html[data-theme="B"][data-mode="dark"] .products__note em {
  background: linear-gradient(105deg, #B5A3FF 0%, #E2A6CC 50%, #FFC8A8 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
html[data-theme="B"][data-mode="dark"] .product--live::before,
html[data-theme="B"][data-mode="dark"] .ledger__label::before,
html[data-theme="B"][data-mode="dark"] .service-row::before,
html[data-theme="B"][data-mode="dark"] .plane__head::after {
  background: linear-gradient(135deg, #B5A3FF, #FFC8A8);
}
html[data-theme="B"][data-mode="dark"] .nav.is-scrolled {
  background: rgba(15, 16, 21, 0.80);
}