/*
  Wick shared overrides
  ---------------------
  Page-specific CSS still lives inline in each HTML file while the site is in
  lofi/static mode. Put global visual tokens and shared chrome tweaks here so
  common edits do not need to be repeated by hand across every page.
*/

:root {
  --paper: #F7F2EA;
  --page: #F7F2EA;
  --surface: #FFFDF8;
  --surface-warm: #FCFAF5;
  --line: #DDD6CA;
  --line-soft: #E9E2D8;
  --field: #F1ECE3;
  --field-2: #E9E2D8;
  --inverse-heading: #FFFDF8;
  --inverse-body: rgba(252,250,245,0.84);
  --inverse-muted: rgba(252,250,245,0.66);
}

#data-reality,
#definition,
.dark-band,
.inverse-section {
  color: var(--inverse-body);
}

#data-reality h1,
#data-reality h2,
#data-reality h3,
#definition h1,
#definition h2,
#definition h3,
.dark-band h1,
.dark-band h2,
.dark-band h3,
.inverse-section h1,
.inverse-section h2,
.inverse-section h3 {
  color: var(--inverse-heading);
}

#data-reality p,
#definition p,
.dark-band p,
.dark-band .section-heading p,
.inverse-section p {
  color: var(--inverse-body);
}

#data-reality .eyebrow,
#definition .eyebrow,
#definition .muted,
.dark-band .eyebrow,
.inverse-section .eyebrow,
.inverse-section .muted {
  color: var(--inverse-muted);
}

#data-reality .text-link,
#definition .text-link,
.dark-band .text-link,
.inverse-section .text-link {
  color: var(--inverse-heading);
}

.drawer-cta {
  background:
    radial-gradient(circle at 24% 28%, rgba(232,93,143,0.08), transparent 34%),
    radial-gradient(circle at 74% 72%, rgba(63,174,159,0.06), transparent 34%),
    radial-gradient(circle, rgba(11,13,16,0.05) 0 1px, transparent 1.25px) 0 0 / 20px 20px,
    linear-gradient(135deg, rgba(255,255,255,0.68), rgba(252,241,246,0.56) 52%, rgba(241,250,248,0.46));
}

.drawer-cta::before {
  background: linear-gradient(180deg, transparent, rgba(232,93,143,0.14), rgba(63,174,159,0.11), transparent);
}

.drawer-cta::after {
  background: linear-gradient(90deg, transparent, rgba(232,93,143,0.16), rgba(63,174,159,0.11), transparent);
}

.drawer-cta-mark {
  opacity: 0.59;
  filter: drop-shadow(0 24px 42px rgba(11,13,16,0.08));
}

.drawer-nav a {
  position: relative;
  background: transparent;
  border-left-color: transparent;
  transition: color 150ms ease;
}

.drawer-nav a::before {
  content: "";
  position: absolute;
  left: 12px;
  right: 10px;
  bottom: 3px;
  height: 1px;
  background: rgba(11,13,16,0.16);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 150ms ease, background 150ms ease;
}

.drawer-nav a:hover,
.drawer-nav a:focus-visible {
  background: transparent;
  border-left-color: transparent;
  color: var(--ink, #0B0D10);
}

.drawer-nav a:hover::before,
.drawer-nav a:focus-visible::before {
  transform: scaleX(1);
  background: rgba(11,13,16,0.28);
}

.drawer-nav a:hover .nav-arrow,
.drawer-nav a:focus-visible .nav-arrow {
  transform: translateX(3px);
}