/* Simply Ai — Dark mode (Anthropic-adjacent)
   Warm near-black grounds, cream foreground, restrained warm accents.
   Triggered by html[data-theme="dark"]. */

html[data-theme="dark"] {
  --parchment:   #1A1816;
  --parchment-2: #201E1B;
  --parchment-3: #262320;
  --mist:        #1F1D1A;
  --ink:         #F2ECDC;
  --ink-2:       #E7DFCC;
  --dusk:        #BDB39B;
  --stone:       #8F8571;
  --stone-2:     #6E6555;
  --mute:        #514A3E;

  --clay:        #E08960;
  --clay-deep:   #C27146;
  --clay-soft:   #3A2A21;
  --moss:        #9DB087;
  --moss-soft:   #2B3228;
  --sakura:      #E6B8A6;
  --saffron:     #D89A6F;

  --surface:     #1F1D1A;
  --surface-2:   #272421;
  --line:        rgba(242, 236, 220, 0.08);
  --line-2:      rgba(242, 236, 220, 0.14);
  --line-strong: rgba(242, 236, 220, 0.22);

  --shadow-1: 0 1px 0 rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
  --shadow-2: 0 1px 0 rgba(0,0,0,0.3), 0 12px 32px -14px rgba(0,0,0,0.5);
  --shadow-3: 0 30px 80px -30px rgba(0,0,0,0.6), 0 2px 8px rgba(0,0,0,0.25);

  color-scheme: dark;
}

/* smooth theme transition */
html, body, .nav, .service-card, .price-card, .cp-card, .quote-card,
.worker-card, .flow-step, .tt-step, .sec-item, .showcase-frame, .sc-col,
.cp-node, .sc-bubble, .sc-block, .sec-frame, .uc-wf, .uc-stat, .uc-right,
.consult-frame, .consult-point, .addon, .pf-a details, .price-toggle,
.pt-opt, .cal-slot, .cal-grid, .calendar-card, .sc-chip, .uc-chip, .eyebrow-pill,
.btn-primary, .btn-ghost, .btn-subtle, .nav-logo, .marquee {
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease;
}

/* Dot grid — brighten slightly on dark */
html[data-theme="dark"] .dots {
  background-image: radial-gradient(circle, rgba(242,236,220,0.12) 1px, transparent 1.4px);
  opacity: 0.5;
}
html[data-theme="dark"] .dots.dense { opacity: 0.6; }
html[data-theme="dark"] .dots.sparse { opacity: 0.35; }

/* Nav blur */
html[data-theme="dark"] .nav { background: rgba(26, 24, 22, 0.78); }
html[data-theme="dark"] .nav.scrolled { background: rgba(26, 24, 22, 0.92); }

/* Nav logo stays clay block — still distinctive */
/* Buttons */
html[data-theme="dark"] .btn-primary { color: #1A1816; background: var(--clay); border-color: var(--clay); }
html[data-theme="dark"] .btn-primary:hover { background: var(--clay-deep); }
html[data-theme="dark"] .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .btn-ghost:hover { background: rgba(242,236,220,0.06); }

/* Hero showcase frame */
html[data-theme="dark"] .showcase-frame {
  background: #1D1B18;
}
html[data-theme="dark"] .showcase-frame::before { border-color: rgba(242,236,220,0.08); }

html[data-theme="dark"] .sc-col { background: #201E1B; border-color: var(--line); }
html[data-theme="dark"] .sc-avatar { background: #3A2A21; color: var(--sakura); }
html[data-theme="dark"] .sc-tabs { background: #1A1816; border-color: var(--line); }
html[data-theme="dark"] .sc-tab.active { background: #2B2724; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,0.3); }
html[data-theme="dark"] .sc-task.active { background: #262320; border-color: var(--line); }
html[data-theme="dark"] .sc-bar { background: rgba(242,236,220,0.08); }

html[data-theme="dark"] .sc-ct.active::after { background: var(--ink); }
html[data-theme="dark"] .sc-bubble,
html[data-theme="dark"] .sc-block { background: #262320; border-color: var(--line); }
html[data-theme="dark"] .caret-sm,
html[data-theme="dark"] .caret { background: var(--ink); }
html[data-theme="dark"] .sc-chip { background: rgba(242,236,220,0.04); border-color: var(--line); color: var(--dusk); }

html[data-theme="dark"] .sc-btn { background: transparent; color: var(--ink); border-color: var(--line-strong); }
html[data-theme="dark"] .sc-btn.primary { background: var(--clay); color: #1A1816; border-color: var(--clay); }

/* Works with — wordmarks dimmer */
html[data-theme="dark"] .wm-logo { color: var(--stone-2); }
html[data-theme="dark"] .wm-sep { background: var(--line); }

/* What we do flow */
html[data-theme="dark"] .flow-step { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .flow-viz { background: #18161400; background-color: #1A1815; border-color: var(--line); }
html[data-theme="dark"] .viz-cell { background: rgba(242,236,220,0.06); }
html[data-theme="dark"] .viz-cell.warm { background: #3A2A21; }
html[data-theme="dark"] .viz-cell.hot { background: var(--clay); }
html[data-theme="dark"] .viz-node { background: #262320; border-color: var(--line); color: var(--dusk); }
html[data-theme="dark"] .viz-node.accent { background: #3A2A21; border-color: var(--clay); color: var(--sakura); }
html[data-theme="dark"] .viz-lines path { stroke: rgba(242,236,220,0.25) !important; }
html[data-theme="dark"] .viz-deploy .viz-pipe { background: rgba(242,236,220,0.08); }
html[data-theme="dark"] .pipe-rail { background: #262320; border-color: var(--line); color: var(--dusk); }
html[data-theme="dark"] .pipe-rail em { color: var(--moss); }

/* Service cards */
html[data-theme="dark"] .service-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .service-card.emphasis {
  /* Flip the emphasised dark card in light mode → cream card in dark mode */
  background: var(--parchment-3);
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-theme="dark"] .service-card.emphasis .sc-title { color: var(--ink); }
html[data-theme="dark"] .service-card.emphasis .sc-copy { color: var(--dusk); }
html[data-theme="dark"] .service-card.emphasis .sc-bullets li { color: var(--dusk); }
html[data-theme="dark"] .service-card.emphasis .sc-link { color: var(--clay); }
html[data-theme="dark"] .service-card.emphasis .arrow { color: var(--clay); }
html[data-theme="dark"] .sc-badge { background: var(--sakura); color: #1A1816; }

/* Workers */
html[data-theme="dark"] .worker-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .worker-card[data-tint="clay"] .worker-avatar { background: #3A2A21; color: var(--sakura); }
html[data-theme="dark"] .worker-card[data-tint="moss"] .worker-avatar { background: var(--moss-soft); color: var(--moss); }
html[data-theme="dark"] .worker-card[data-tint="sakura"] .worker-avatar { background: #34261F; color: var(--sakura); }

/* Use cases */
html[data-theme="dark"] .uc-tab { background: transparent; border-color: var(--line-2); color: var(--dusk); }
html[data-theme="dark"] .uc-tab.active { background: var(--clay); color: #1A1816; border-color: var(--clay); }
html[data-theme="dark"] .uc-stat { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .uc-wf { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .uc-chip { border-color: var(--line-2); color: var(--dusk); }
html[data-theme="dark"] .uc-right { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .uc-legend .d-before { background: var(--dusk); }
html[data-theme="dark"] .uc-bar-before { background: var(--dusk); }
html[data-theme="dark"] .uc-bar-after { background: var(--clay); }

/* Cloud / Private — flip the dark emphasis so it stays distinct */
html[data-theme="dark"] .cp-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .cp-card.dark {
  background: var(--parchment-3);
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-theme="dark"] .cp-card.dark h3 { color: var(--ink); }
html[data-theme="dark"] .cp-dark-body { color: var(--dusk); }
html[data-theme="dark"] .cp-list.dark li { border-color: var(--line); color: var(--dusk); }
html[data-theme="dark"] .cp-list.dark li:last-child { border-bottom-color: var(--line); }
html[data-theme="dark"] .cp-list.dark strong { color: var(--ink); }
html[data-theme="dark"] .cp-list.dark em { color: var(--stone); }
html[data-theme="dark"] .cp-pill-dark { border-color: var(--line-2); color: var(--dusk); background: rgba(242,236,220,0.04); }
html[data-theme="dark"] .cp-diagram.dark { border-top-color: var(--line); }
html[data-theme="dark"] .cp-node { background: #262320; border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .cp-node.accent { background: #3A2A21; border-color: var(--clay); color: var(--sakura); }
html[data-theme="dark"] .cp-node.dark { background: rgba(242,236,220,0.04); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .cp-node.dark.accent { background: #3A2A21; border-color: var(--sakura); color: var(--sakura); }
html[data-theme="dark"] .cp-edge { background: rgba(242,236,220,0.10); }
html[data-theme="dark"] .cp-edge.dark { background: rgba(242,236,220,0.10); }
html[data-theme="dark"] .cp-hybrid { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .t-clay-light { color: var(--sakura); }

/* Struggle quotes + bridge */
html[data-theme="dark"] .quote-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .quote-body { color: var(--ink); }
html[data-theme="dark"] .quote-body em { color: var(--sakura); }
html[data-theme="dark"] .bridge {
  background: var(--parchment-3);
  color: var(--ink);
}
html[data-theme="dark"] .bridge .eyebrow { color: var(--sakura); }
html[data-theme="dark"] .bridge-copy { color: var(--dusk); }
html[data-theme="dark"] .bridge-copy em { color: var(--sakura); }

/* Security */
html[data-theme="dark"] .sec-frame { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .sec-item { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .sec-item.highlight { background: #2E2823; border-color: var(--clay-deep); }
html[data-theme="dark"] .sec-pill { background: #3A2A21; color: var(--sakura); }
html[data-theme="dark"] .sec-pill.muted { background: rgba(242,236,220,0.06); color: var(--stone); }
html[data-theme="dark"] .sec-pill.warn { background: #3E2F1E; color: #D8A96A; }
html[data-theme="dark"] .sec-body { color: var(--ink); }
html[data-theme="dark"] .sec-state-lbl { color: var(--stone); }
html[data-theme="dark"] .sec-state-lbl.ok { color: var(--moss); }
html[data-theme="dark"] .sec-state-lbl.block { color: var(--clay); }
html[data-theme="dark"] .sec-approve-chip { background: var(--clay); color: #1A1816; }

/* Training */
html[data-theme="dark"] .tt-step { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .tt-dot { background: var(--parchment); border-color: var(--clay); }

/* Consult */
html[data-theme="dark"] .consult-frame {
  background: var(--surface);
  border-color: var(--line);
}
html[data-theme="dark"] .consult-point { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .calendar-card {
  background: var(--parchment-3);
  color: var(--ink);
  border: 1px solid var(--line);
}
html[data-theme="dark"] .calendar-card .eyebrow { color: var(--sakura); }
html[data-theme="dark"] .cal-month { color: var(--ink); }
html[data-theme="dark"] .cal-cell { background: rgba(242,236,220,0.04); }
html[data-theme="dark"] .cal-cell.booked { background: #3A2A21; }
html[data-theme="dark"] .cal-cell.open { background: var(--sakura); }
html[data-theme="dark"] .cal-cell.today { background: var(--clay); }
html[data-theme="dark"] .slot { background: rgba(242,236,220,0.06); color: var(--ink); }
html[data-theme="dark"] .slot:hover { background: var(--clay); color: #1A1816; }
html[data-theme="dark"] .slot.taken { background: transparent; color: var(--stone-2); }
html[data-theme="dark"] .cal-foot { color: var(--stone); border-top-color: var(--line); }
html[data-theme="dark"] .slot-day { color: var(--dusk); }

/* Pricing */
html[data-theme="dark"] .price-toggle { background: var(--mist); border-color: var(--line); }
html[data-theme="dark"] .pt-opt.active { background: var(--surface-2); color: var(--ink); }
html[data-theme="dark"] .pt-save { color: var(--clay); }
html[data-theme="dark"] .price-card { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .price-card.featured {
  background: var(--parchment-3);
  border-color: var(--line-strong);
  color: var(--ink);
}
html[data-theme="dark"] .price-card.featured .pc-name { color: var(--ink); }
html[data-theme="dark"] .price-card.featured .pc-amount { color: var(--ink); }
html[data-theme="dark"] .price-card.featured .pc-currency,
html[data-theme="dark"] .price-card.featured .pc-period,
html[data-theme="dark"] .price-card.featured .pc-desc-featured,
html[data-theme="dark"] .price-card.featured .pc-sub-featured,
html[data-theme="dark"] .price-card.featured .t-dusk,
html[data-theme="dark"] .price-card.featured .small.t-muted { color: var(--dusk); }
html[data-theme="dark"] .price-card.featured .pc-includes { border-top-color: var(--line); }
html[data-theme="dark"] .price-card.featured .pc-includes li { color: var(--dusk); }
html[data-theme="dark"] .price-card.featured .pc-includes li::before { background: var(--clay); }
html[data-theme="dark"] .price-card.featured .pc-cta.btn-ghost { color: var(--ink); border-color: var(--line-strong); }

html[data-theme="dark"] .pc-ribbon { background: var(--sakura); color: #1A1816; }
html[data-theme="dark"] .addons { background: var(--surface); border-color: var(--line); }
html[data-theme="dark"] .addon { background: var(--surface-2); border-color: var(--line); }
html[data-theme="dark"] .pf-a details { border-top-color: var(--line); }
html[data-theme="dark"] .pf-a details:last-child { border-bottom-color: var(--line); }
html[data-theme="dark"] .pf-a summary { color: var(--ink); }
html[data-theme="dark"] .pf-a summary::after { color: var(--stone); }
html[data-theme="dark"] .pf-a details p { color: var(--dusk); }

/* Final CTA */
html[data-theme="dark"] .final-head em { color: var(--clay); }

/* Footer */
html[data-theme="dark"] .footer { background: var(--parchment-2); border-top-color: var(--line); }
html[data-theme="dark"] .footer-bottom { border-top-color: var(--line); }
html[data-theme="dark"] .footer-cols a { color: var(--dusk); }
html[data-theme="dark"] .footer-cols a:hover { color: var(--ink); }

/* Eyebrow pill */
html[data-theme="dark"] .eyebrow-pill {
  border-color: var(--line-2);
  background: rgba(242,236,220,0.03);
  color: var(--dusk);
}

/* Consult dark slot buttons in calendar */
html[data-theme="dark"] .sc-approve-row .pulse-dot,
html[data-theme="dark"] .pulse-dot { background: var(--clay); }
html[data-theme="dark"] .pulse-dot::before { border-color: var(--clay); }

/* t-clay stays brand accent */
html[data-theme="dark"] .t-clay { color: var(--clay); }

/* Hairline */
html[data-theme="dark"] .hairline { background: var(--line); }

/* Flow pipeline dots */
html[data-theme="dark"] .pipe-dot { background: var(--clay); }
html[data-theme="dark"] .pipe-dot.d2 { background: var(--moss); }
html[data-theme="dark"] .pipe-dot.d3 { background: var(--saffron); }