/* theme10 — "Gradient" (UX-031)
 * Violet-tinted ground, indigo accent, and the preset's signature kept: the
 * owner's two stored colours (--color1 -> --color2) sweep across the page's
 * accent furniture.
 *
 * WHERE THE GRADIENT MOVED, AND WHY. It used to be the BACKGROUND of every
 * social row and every share button, with `#ffffff` text and a text-shadow on
 * top. A gradient reports `background-color: transparent`, so that text has no
 * resolvable background at all — DesignImprovements.md's Appendix A names this
 * exact case as unmeasurable and excludes it from its own figures. Two
 * owner-picked colours under fixed white also means a page whose --color1 and
 * --color2 are both pale renders white on white, which is the failure this
 * ticket exists to close.
 *
 * So the sweep now runs on the header band, the section ticks and a keyline
 * down each social row — decoration, never behind text — while every control
 * keeps the solid --accent/--on-accent pair the report's table measures. The
 * preset still reads as "the gradient one" at a glance and every pair on it is
 * knowable.
 *
 * Drawn with ::before rather than `border-image`, which would have been the
 * shorter spelling: border-image suppresses border-radius entirely, so it would
 * have squared off the very panels the recipe rounds. */
:root {
  --bg-page: #f0eef6;
  --panel: #ffffff;
  --chip: #efecf7;
  --line: #e5e1f0;

  --ink-1: #171422;
  --ink-2: #544f66;
  --ink-3: #605a73;

  --accent: #5b3fbe;
  --accent-soft: #ece7fb;
  --on-accent: #ffffff;

  --bar-bg: #171422;
  --bar-ink: #ffffff;
  --overlay-bg: #0b0911;

  --radius-panel: 24px;
  --radius-control: 14px;
  --shadow-md: 0 10px 26px -12px rgba(91, 63, 190, 0.4);
}

/* THE SIGNATURE: an 8px sweep across the top of the header panel. The band
 * carries the panel's own top radius rather than relying on `overflow: hidden`
 * on #header — that would clip the 100px logo straddle theme2/theme3 depend on,
 * and #header is shared. */
#header {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}

/* The three sweeps below read --accent / --accent-2, not the raw --color1 /
 * --color2 they used to: links/lib/accent.php is the single place that decides
 * whether a stored value is a real choice or the factory default, so this
 * preset now agrees with every other accent surface instead of painting the
 * raw #000333 default on a page whose buttons use the preset colour. The
 * --accent fallback on the second stop collapses each sweep to a flat bar when
 * the owner picked only one colour. */
#header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  border-radius: var(--radius-panel) var(--radius-panel) 0 0;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-2, var(--accent)) 100%
  );
}

.sectionTitle::after {
  width: 56px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent-2, var(--accent)) 100%
  );
}

/* The same sweep at list scale. Absolutely positioned so it is out of flow —
 * a static ::before would become a third flex item in the row. */
.link {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.link::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(
    180deg,
    var(--accent) 0%,
    var(--accent-2, var(--accent)) 100%
  );
}

.link:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}