/* Amber mid — Cobalt structure + richer amber signals (not amber washes).
 * Live homepage theme (`data-theme="amber-mid"` on index.html).
 */

[data-theme="amber-mid"] {
  --cw-accent: var(--color-accent);
  --cw-accent-bright: var(--color-accent);
  --cw-accent-light: oklch(86% 0.15 92);
  --df-bg: var(--color-paper);
  --df-amber: var(--color-accent);
}

[data-theme="amber-mid"] ::selection {
  background: oklch(82% 0.17 90 / 0.22);
  color: var(--color-ink);
}

[data-theme="amber-mid"] .cw-team-avatar {
  color: var(--color-accent-ink);
  background: oklch(82% 0.17 90 / 0.18);
  border-color: oklch(82% 0.17 90 / 0.45);
}

[data-theme="amber-mid"] .cw-team-card__email {
  color: var(--color-ink-2);
}

[data-theme="amber-mid"] .cw-team-card__email:hover {
  color: var(--color-ink);
}

[data-theme="amber-mid"] .cw-page-contact .cw-mono.tw-rounded-full,
[data-theme="amber-mid"] .cw-contact-hero .cw-mono {
  color: var(--color-accent) !important;
  border-color: oklch(82% 0.17 90 / 0.35) !important;
  background: oklch(82% 0.17 90 / 0.08) !important;
}

[data-theme="amber-mid"] .cw-gradient-text {
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: var(--color-accent);
}

[data-theme="amber-mid"] .cw-hero-mesh .cw-display .cw-gradient-text {
  color: var(--color-accent);
}

[data-theme="amber-mid"] .cw-btn-primary {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

[data-theme="amber-mid"] .cw-btn-primary:hover {
  background: oklch(76% 0.16 88);
  color: var(--color-accent-ink);
}

[data-theme="amber-mid"] .cw-btn-ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background: var(--color-paper-2);
}

[data-theme="amber-mid"] .cw-header .header-links--active {
  color: var(--color-accent);
}

[data-theme="amber-mid"] .cw-header .header-links::after {
  background: var(--color-accent);
}

[data-theme="amber-mid"] .cw-cmdk-btn:hover,
[data-theme="amber-mid"] .cw-cmdk-btn:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

[data-theme="amber-mid"] .cw-gradient-text--brand {
  color: var(--color-accent);
}

[data-theme="amber-mid"] .cw-divider-glow {
  background: var(--color-accent);
  width: 5rem;
}

[data-theme="amber-mid"] .cw-footer .footer-link:hover,
[data-theme="amber-mid"] .cw-social-link:hover {
  color: var(--color-accent) !important;
}

[data-theme="amber-mid"] .df-code__key,
[data-theme="amber-mid"] .df-code__num,
[data-theme="amber-mid"] .df-code__chip,
[data-theme="amber-mid"] .df-code__cursor {
  color: var(--color-accent);
}

[data-theme="amber-mid"] .df-code__chip {
  border-color: var(--color-rule-2);
}

[data-theme="amber-mid"] .df-code:hover,
[data-theme="amber-mid"] .df-code:focus-within {
  border-color: var(--color-rule-2);
}

[data-theme="amber-mid"] .df-speed-bar--depotfox,
[data-theme="amber-mid"] .df-tour-step.is-active::after {
  background: var(--color-accent);
}

[data-theme="amber-mid"] .cw-glass--featured,
[data-theme="amber-mid"] .cw-glass--brand {
  border-color: var(--color-rule-2);
  box-shadow: var(--cw-card-shadow);
}

[data-theme="amber-mid"] .cw-pricing-badge {
  background: var(--color-accent);
  color: var(--color-accent-ink);
}

[data-theme="amber-mid"] .cw-icon-ring {
  color: var(--color-ink);
}

[data-theme="amber-mid"] .df-hero__kicker::before {
  background: var(--color-accent);
}

[data-theme="amber-mid"] .df-hero {
  min-height: calc(100svh - 72px);
}

/* Section kickers — amber signal on type, not on surfaces */
[data-theme="amber-mid"] .df-kicker {
  color: var(--color-accent) !important;
  font-size: 0.875rem;
  letter-spacing: 0.1em;
}

[data-theme="amber-mid"] .df-split-line__accent,
[data-theme="amber-mid"] .df-split-line .cw-gradient-text--brand {
  color: var(--color-accent);
}

[data-theme="amber-mid"] .df-hero__title .df-split-line__accent,
[data-theme="amber-mid"] .cw-footer__statement .df-split-line__accent {
  color: var(--color-accent);
}

/* Dark graphite bands — solid fill, light ink (Hallmark Cobalt signature 8) */
[data-theme="amber-mid"] .df-graphite,
[data-theme="amber-mid"] .df-tour,
[data-theme="amber-mid"] .df-savings,
[data-theme="amber-mid"] .df-switch,
[data-theme="amber-mid"] .df-confidence,
[data-theme="amber-mid"] .df-faq,
[data-theme="amber-mid"] .df-wins-band,
[data-theme="amber-mid"] .df-ai-band {
  --cw-cloud: var(--color-on-graphite);
  --cw-ghost: var(--color-on-graphite);
  --cw-slate: var(--color-on-graphite-muted);
  --cw-steel: oklch(72% 0.004 100);
  --cw-card: oklch(22% 0.004 100);
  --cw-card-border: oklch(96% 0.002 100 / 0.14);
  --cw-card-border-strong: oklch(96% 0.002 100 / 0.22);
  color: var(--color-on-graphite);
}

[data-theme="amber-mid"] .df-wins-band,
[data-theme="amber-mid"] .df-ai-band {
  background: var(--color-graphite);
}

[data-theme="amber-mid"] .df-graphite .cw-display,
[data-theme="amber-mid"] .df-switch .cw-display,
[data-theme="amber-mid"] .df-tour .cw-display,
[data-theme="amber-mid"] .df-savings .cw-display,
[data-theme="amber-mid"] .df-wins-band .cw-display,
[data-theme="amber-mid"] .df-ai-band .cw-display {
  color: var(--color-on-graphite);
}

[data-theme="amber-mid"] .df-switch p,
[data-theme="amber-mid"] .df-graphite .cw-reveal > p:not(.df-kicker) {
  color: var(--color-on-graphite-muted);
}

[data-theme="amber-mid"] .df-switch .cw-mono,
[data-theme="amber-mid"] .df-graphite .cw-mono {
  color: var(--color-accent);
}

[data-theme="amber-mid"] #time-saved .cw-display {
  color: var(--color-on-graphite) !important;
}

[data-theme="amber-mid"] #time-saved .df-split-line__accent {
  color: var(--color-accent) !important;
}

[data-theme="amber-mid"] .df-switch .cw-mono,
[data-theme="amber-mid"] .df-kicker-lg {
  font-size: 0.9375rem;
  letter-spacing: 0.08em;
}

[data-theme="amber-mid"] .df-switch .cw-display {
  font-size: clamp(2.5rem, 5vw, 3.75rem);
}

[data-theme="amber-mid"] .df-tour-step.is-active {
  background: oklch(96% 0.002 100 / 0.06);
}

[data-theme="amber-mid"] .df-tour__stage {
  background: var(--color-graphite-2);
}

/* Time-saved result panel — no amber wash (Cobalt hairline card) */
[data-theme="amber-mid"] .df-savings__result {
  background: var(--color-graphite);
  border-left-color: var(--cw-card-border);
}

[data-theme="amber-mid"] .df-savings__result::before {
  display: none;
}

[data-theme="amber-mid"] .df-switch {
  background: var(--color-graphite);
}

[data-theme="amber-mid"] .df-assignment__line i {
  background: var(--color-accent);
  box-shadow: 0 0 0 5px oklch(96% 0.002 100 / 0.08);
}

[data-theme="amber-mid"] .cw-gen-card--active .cw-gen-label {
  color: var(--color-accent);
}

[data-theme="amber-mid"] .cw-gen-card--active {
  border-color: var(--color-rule-2) !important;
  box-shadow: var(--cw-card-shadow);
}

[data-theme="amber-mid"] .cw-feature-card:hover {
  border-color: var(--color-rule-2);
  box-shadow: var(--cw-card-shadow-hover);
}

[data-theme="amber-mid"] .cw-price-check {
  color: var(--color-accent);
}

[data-theme="amber-mid"] .df-faq details[open] summary::before,
[data-theme="amber-mid"] .df-faq details[open] summary::after {
  background: var(--color-accent);
}

[data-theme="amber-mid"] .df-switch-step i {
  color: var(--color-accent);
}

/* ==========================================================================
   What changes for you — graphite band + hairline cards
   ========================================================================== */
[data-theme="amber-mid"] .df-wins-band__intro {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

[data-theme="amber-mid"] .df-wins-band__title {
  margin-top: 1rem;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  color: var(--color-on-graphite);
}

[data-theme="amber-mid"] .df-wins-band__title .df-split-line__accent {
  display: block;
  margin-top: 0.15rem;
}

[data-theme="amber-mid"] .df-wins-band__lede {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-on-graphite-muted);
}

[data-theme="amber-mid"] .df-wins-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  [data-theme="amber-mid"] .df-wins-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  [data-theme="amber-mid"] .df-wins-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

[data-theme="amber-mid"] .df-wins-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  min-height: 100%;
  padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--radius-card);
  background: var(--color-graphite-2);
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s var(--cw-ease),
    transform 0.55s var(--cw-ease),
    border-color var(--dur-short) var(--ease-out);
}

[data-theme="amber-mid"] .df-wins-card.is-in {
  opacity: 1;
  transform: none;
}

[data-theme="amber-mid"] .df-wins-card:hover {
  border-color: var(--cw-card-border-strong);
}

[data-theme="amber-mid"] .df-wins-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 9px;
  border: 1px solid var(--cw-card-border);
  background: var(--cw-card);
  color: var(--color-on-graphite);
  font-size: 1.05rem;
}

[data-theme="amber-mid"] .df-wins-card__stat {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 1.85rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-on-graphite);
}

[data-theme="amber-mid"] .df-wins-card__stat small {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cw-steel);
}

[data-theme="amber-mid"] .df-wins-card__title {
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-on-graphite);
}

[data-theme="amber-mid"] .df-wins-card__body {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--color-on-graphite-muted);
}

/* ==========================================================================
   AI band — same graphite + card system
   ========================================================================== */
[data-theme="amber-mid"] .df-ai-band__intro {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
}

[data-theme="amber-mid"] .df-ai-band__title {
  margin-top: 1rem;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.08;
  color: var(--color-on-graphite);
}

[data-theme="amber-mid"] .df-ai-band__lede {
  margin-top: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-on-graphite-muted);
}

[data-theme="amber-mid"] .df-ai-band .df-ai-pulse {
  display: inline-flex;
  margin: 1.5rem auto 0;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--cw-card-border-strong);
  border-radius: 999px;
  background: var(--color-graphite-2);
  color: var(--color-on-graphite);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

[data-theme="amber-mid"] .df-ai-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 3rem;
}

@media (min-width: 640px) {
  [data-theme="amber-mid"] .df-ai-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  [data-theme="amber-mid"] .df-ai-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.15rem;
  }
}

[data-theme="amber-mid"] .df-ai-card {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 100%;
  padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid var(--cw-card-border);
  border-radius: var(--radius-card);
  background: var(--color-graphite-2);
  transition: border-color var(--dur-short) var(--ease-out);
}

[data-theme="amber-mid"] .df-ai-card:hover {
  border-color: var(--cw-card-border-strong);
}

[data-theme="amber-mid"] .df-ai-card__step {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  color: var(--cw-steel);
}

[data-theme="amber-mid"] .df-ai-card__tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
}

[data-theme="amber-mid"] .df-ai-card__title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--color-on-graphite);
}

[data-theme="amber-mid"] .df-ai-card__body {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--color-on-graphite-muted);
}

/* ==========================================================================
   Closing CTA — paper panel (light after dark FAQ)
   ========================================================================== */
[data-theme="amber-mid"] .df-cta-close__panel.cw-cta {
  max-width: 52rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.75rem, 5vw, 3.5rem);
  text-align: center;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-card);
  background: var(--color-paper-2);
  color: var(--color-ink);
  box-shadow: var(--cw-card-shadow);
}

[data-theme="amber-mid"] .df-cta-close__title {
  margin-top: 1rem;
  max-width: 28ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.1;
  color: var(--color-ink);
}

[data-theme="amber-mid"] .df-cta-close__title .df-split-line__accent {
  display: block;
  margin-top: 0.2rem;
}

[data-theme="amber-mid"] .df-cta-close__lede {
  max-width: 36ch;
  margin: 1.25rem auto 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-muted);
}

[data-theme="amber-mid"] .df-cta-close__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 2.25rem;
}

@media (prefers-reduced-motion: reduce) {
  [data-theme="amber-mid"] .df-wins-card {
    opacity: 1;
    transform: none;
  }
}