/* ============================================================
   BRIEFLY V28.0 — ACCENT GRADIENT SYSTEM
   Full accent propagation + subtle accent-aware gradients
   ============================================================ */

:root{
  --briefly-gradient-strength:.10;
  --briefly-gradient-soft:.055;
}

/* Accent-aware page backgrounds */
html[data-briefly-theme="light"] body{
  background:
    radial-gradient(circle at 92% -8%, rgba(var(--briefly-accent-rgb),var(--briefly-gradient-strength)) 0, transparent 34%),
    radial-gradient(circle at 8% 22%, rgba(var(--briefly-accent-rgb),var(--briefly-gradient-soft)) 0, transparent 28%),
    linear-gradient(180deg,#fbfcfd 0%,#f6f9fa 46%,#f3f7f8 100%)!important;
}
html[data-briefly-theme="dark"] body{
  background:
    radial-gradient(circle at 88% -10%, rgba(var(--briefly-accent-rgb),.10) 0, transparent 32%),
    radial-gradient(circle at 5% 26%, rgba(var(--briefly-accent-rgb),.045) 0, transparent 28%),
    linear-gradient(180deg,#071a27 0%,#061620 58%,#05131c 100%)!important;
}

/* Accent color is now the source of truth app-wide */
:root{
  --cyan:var(--briefly-accent);
}

/* Text accents */
.v10Kicker,
.v10SectionHead small,
.v10ArticleMeta span,
.v25Hero>small,
.v25PanelHead small,
.v131SectionHead>a,
.v10CompareLink,
.v17DeepJump small,
.v17DeepJump a,
.v15Timeline small,
.v15DeepHead small,
.v131SourceCard>span,
.v10Live,
.v10MiniSignal b,
.v10FeedMeta span,
.v10TopMeta span,
.v10LeadMeta span,
.v10ArticleSection>small,
.v10Why>small{
  color:var(--briefly-accent)!important;
}

/* Filled accent UI */
.v10Categories a.active,
.v10IntroActions .primary,
.v25Save,
.v25PushActions button:not(.secondary),
.v10Bottom .active b,
.v10Bottom .active span{
  background:var(--briefly-accent)!important;
}
.v10Bottom .active b,
.v10Bottom .active span{
  background:none!important;
  color:var(--briefly-accent)!important;
}

/* Icons/dots/status */
.pulseDot,
.v10IntroActions i,
.v15Timeline article:before,
.v131ReadTime,
.v10Intel>strong,
.v10Intel b,
.v10Intel small,
.v10Trust span,
.v17DeepJump a{
  border-color:var(--briefly-accent)!important;
}
.pulseDot,
.v10IntroActions i,
.v15Timeline article:before{
  background:var(--briefly-accent)!important;
}

/* Selection controls */
.v25TopicGrid input:checked+span,
.v25Segment label input:checked+span,
.v25Segment button.active,
.v26TeamCard input:checked+span,
.v26Appearance button.active,
.v27Accent.active{
  border-color:rgba(var(--briefly-accent-rgb),.72)!important;
  background:rgba(var(--briefly-accent-rgb),.12)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--briefly-accent-rgb),.16)!important;
}
.v26TeamCard input:checked+span:after{
  color:var(--briefly-accent)!important;
}

/* Light theme: selected cards remain readable and accent-aware */
html[data-briefly-theme="light"] .v25TopicGrid input:checked+span,
html[data-briefly-theme="light"] .v25Segment label input:checked+span,
html[data-briefly-theme="light"] .v25Segment button.active,
html[data-briefly-theme="light"] .v26TeamCard input:checked+span{
  color:#112b35!important;
  background:
    linear-gradient(135deg,
      rgba(var(--briefly-accent-rgb),.18),
      rgba(var(--briefly-accent-rgb),.08)
    )!important;
}
html[data-briefly-theme="light"] .v25TopicGrid input:checked+span *,
html[data-briefly-theme="light"] .v25Segment label input:checked+span *,
html[data-briefly-theme="light"] .v26TeamCard input:checked+span *{
  color:#112b35!important;
}

/* Buttons */
.v10IntroActions .primary,
.v25Save,
.v25PushActions button:not(.secondary){
  color:#06171f!important;
  border-color:transparent!important;
  box-shadow:0 8px 22px rgba(var(--briefly-accent-rgb),.17)!important;
}
html[data-briefly-accent="yellow"] .v10IntroActions .primary,
html[data-briefly-accent="yellow"] .v25Save,
html[data-briefly-accent="yellow"] .v25PushActions button:not(.secondary){
  color:#282000!important;
}

/* Links and active nav */
a.v10CompareLink,
.v131SectionHead>a,
.v25Links a,
.v10SectionHead>a{
  color:var(--briefly-accent)!important;
}
.v10Bottom .active{
  color:var(--briefly-accent)!important;
}

/* Accent-aware soft card highlights */
.v10LeadLink,
.v10Brief,
.v17DeepJump,
.v10Intel,
.v15DeepNews{
  box-shadow:
    0 18px 45px rgba(0,0,0,.06),
    inset 0 0 0 1px rgba(var(--briefly-accent-rgb),.035)!important;
}

/* Light cards get a faint accent wash instead of petroleum */
html[data-briefly-theme="light"] .v10LeadLink,
html[data-briefly-theme="light"] .v10Brief,
html[data-briefly-theme="light"] .v17DeepJump,
html[data-briefly-theme="light"] .v10Intel,
html[data-briefly-theme="light"] .v15DeepNews{
  background:
    linear-gradient(145deg,
      rgba(255,255,255,.98),
      rgba(var(--briefly-accent-rgb),.035)
    )!important;
}

/* Settings preview */
.v28Preview{
  border:1px solid var(--line);
  border-radius:18px;
  padding:16px;
  background:
    linear-gradient(135deg,
      rgba(var(--briefly-accent-rgb),.12),
      rgba(var(--briefly-accent-rgb),.035)
    );
}
.v28Preview small,.v28Preview b,.v28Preview span{display:block}
.v28Preview small{font-size:8px;color:var(--briefly-accent);font-weight:900;letter-spacing:.12em}
.v28Preview b{font-size:17px;margin-top:4px}
.v28Preview span{font-size:11px;color:var(--muted);margin-top:4px}
.v28PreviewActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}
.v28PreviewActions button{border-radius:13px;padding:11px;border:1px solid var(--briefly-accent);background:transparent;color:var(--briefly-accent);font-weight:800}
.v28PreviewActions button:first-child{background:var(--briefly-accent);color:#06171f}

/* Gradient intensity selector */
.v28RangeRow{display:flex;align-items:center;gap:12px;margin-top:10px}
.v28RangeRow span{font-size:9px;color:var(--muted);white-space:nowrap}
.v28RangeRow input[type="range"]{width:100%;accent-color:var(--briefly-accent)}
.v28GradientToggle{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px}
.v28GradientToggle label{display:flex;align-items:center;gap:10px;font-size:12px}
.v28GradientToggle input{accent-color:var(--briefly-accent)}

@media(max-width:700px){
  .v28Preview small{font-size:12px}
  .v28Preview b{font-size:18px}
  .v28Preview span{font-size:13px}
  .v28PreviewActions button{font-size:14px}
  .v28RangeRow span{font-size:12px}
  .v28GradientToggle label{font-size:14px}
}