/**
 * OAO Design System — Home accent layer
 * Dual-tone (warm orange + cool indigo) applied to Home hero / ask / pillars only.
 * Loaded last; scoped to #pageHome so other pages keep the monochrome system.
 */
/* Light theme: saturated strokes on paper, darker inks for text (AA on #fafafa) */
#pageHome {
  --oao-accent-warm: var(--oao-color-accent, #ff5e00);
  --oao-accent-cool: #3949c4;
  --oao-accent-warm-ink: #c2440a;
  --oao-accent-cool-ink: #2c3aa8;
  --oao-accent-warm-soft: rgba(255, 94, 0, 0.09);
  --oao-accent-cool-soft: rgba(57, 73, 196, 0.09);
  --oao-accent-glow-warm: rgba(255, 94, 0, 0.1);
  --oao-accent-glow-cool: rgba(57, 73, 196, 0.09);
  --oao-accent-line: 0.6;
}

/* Dark theme: lifted, desaturated tints — bright hues bloom on near-black */
[data-theme="dark"] #pageHome {
  --oao-accent-warm: var(--oao-color-accent, #ff9a44);
  --oao-accent-cool: #8fa8ff;
  --oao-accent-warm-ink: #ffb473;
  --oao-accent-cool-ink: #a8bcff;
  --oao-accent-warm-soft: rgba(255, 154, 68, 0.12);
  --oao-accent-cool-soft: rgba(143, 168, 255, 0.12);
  --oao-accent-glow-warm: rgba(255, 154, 68, 0.1);
  --oao-accent-glow-cool: rgba(143, 168, 255, 0.09);
  --oao-accent-line: 0.52;
}

/* ── Ambient light: two soft color fields behind the home column ── */
#pageHome .oao-v2-home {
  position: relative;
  isolation: isolate;
}

#pageHome .oao-v2-home::before {
  content: "";
  position: absolute;
  inset: -8% -14% auto -14%;
  height: 62%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(48% 62% at 16% 6%, var(--oao-accent-glow-warm), transparent 70%),
    radial-gradient(52% 66% at 88% 24%, var(--oao-accent-glow-cool), transparent 72%);
  filter: blur(6px);
}

/* ── Hero kicker: warm marker ── */
#pageHome .oao-v2-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

#pageHome .oao-v2-kicker::before {
  content: "";
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--oao-accent-warm), var(--oao-accent-cool));
}

/* ── Hero title: warm→cool gradient ink ── */
#pageHome .oao-v2-hero-title {
  background: linear-gradient(
    100deg,
    var(--oao-color-text) 0%,
    var(--oao-color-text) 24%,
    var(--oao-accent-warm-ink) 64%,
    var(--oao-accent-cool-ink) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

#pageHome .oao-v2-hero-explain {
  position: relative;
  padding-left: 12px;
}

#pageHome .oao-v2-hero-explain::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  bottom: 0.28em;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--oao-accent-warm), var(--oao-accent-cool));
}

/* ── Ask: focus ring + primary button pick up the dual tone ── */
#pageHome #oaoAskInput:focus,
#pageHome #oaoAskInput:focus-visible {
  outline: none;
  border-color: var(--oao-accent-cool) !important;
  box-shadow: 0 0 0 3px var(--oao-accent-cool-soft) !important;
}

#pageHome #oaoAskBtn:not(:hover) {
  border-color: color-mix(in srgb, var(--oao-accent-warm) 42%, var(--oao-color-border)) !important;
  box-shadow: inset 0 -2px 0 0 var(--oao-accent-warm-soft) !important;
}

#pageHome #oaoAskBtn:hover {
  border-color: var(--oao-accent-warm) !important;
  box-shadow: 0 6px 18px var(--oao-accent-glow-warm) !important;
}

/* ── Pillars: alternating warm / cool identity ── */
#pageHome .oao-v2-pillar-card {
  position: relative;
  overflow: hidden;
  --oao-pillar-tone: var(--oao-accent-warm);
  --oao-pillar-tone-ink: var(--oao-accent-warm-ink);
  --oao-pillar-tone-soft: var(--oao-accent-warm-soft);
}

#pageHome .oao-v2-pillar-card:nth-child(2),
#pageHome .oao-v2-pillar-card:nth-child(4) {
  --oao-pillar-tone: var(--oao-accent-cool);
  --oao-pillar-tone-ink: var(--oao-accent-cool-ink);
  --oao-pillar-tone-soft: var(--oao-accent-cool-soft);
}

#pageHome .oao-v2-pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--oao-pillar-tone);
  opacity: var(--oao-accent-line, 0.6);
  transform: scaleX(0.34);
  transform-origin: left center;
  transition: transform var(--oao-transition-base, 220ms ease), opacity var(--oao-transition-base, 220ms ease);
}

#pageHome button.oao-v2-pillar-card:hover::before,
#pageHome button.oao-v2-pillar-card:focus-visible::before {
  transform: scaleX(1);
  opacity: 1;
}

#pageHome button.oao-v2-pillar-card:hover,
#pageHome button.oao-v2-pillar-card:focus-visible {
  border-color: color-mix(in srgb, var(--oao-pillar-tone) 46%, var(--oao-color-border-soft)) !important;
  background: linear-gradient(180deg, var(--oao-pillar-tone-soft), transparent 78%) !important;
  transform: translateY(-2px);
}

#pageHome button.oao-v2-pillar-card:focus-visible {
  box-shadow: 0 0 0 3px var(--oao-pillar-tone-soft) !important;
}

#pageHome .oao-v2-pillar-card:hover .oao-v2-pillar-name {
  color: var(--oao-pillar-tone-ink) !important;
}

/* ── Convergence node ── */
#pageHome .oao-v2-pillar-oao-name {
  background: linear-gradient(96deg, var(--oao-accent-warm-ink), var(--oao-accent-cool-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  -webkit-text-fill-color: transparent;
}

#pageHome .oao-v2-pillar-oao--connector::before {
  background: linear-gradient(90deg, transparent, var(--oao-accent-warm)) !important;
}

#pageHome .oao-v2-pillar-oao--connector::after {
  background: linear-gradient(90deg, var(--oao-accent-cool), transparent) !important;
}

/* ── Flow lines: warm feed, cool bus ── */
#pageHome .oao-v2-pillars-flow-svg {
  color: color-mix(in srgb, var(--oao-accent-cool) 48%, var(--oao-color-border-soft, #d4d4d4));
}

#pageHome .oao-v2-pillars-flow-svg .oao-flow-stem {
  stroke: var(--oao-accent-warm);
  opacity: 0.85;
}

#pageHome .oao-v2-pillars-flow-svg .oao-flow-hub {
  fill: var(--oao-accent-warm);
}

@media (prefers-reduced-motion: reduce) {
  #pageHome button.oao-v2-pillar-card:hover,
  #pageHome button.oao-v2-pillar-card:focus-visible {
    transform: none;
  }

  #pageHome .oao-v2-pillar-card::before {
    transition: none;
  }
}