/* ============================================================================
   StrokeIQ retrofit — remaps the legacy (blue) token system used by the
   Toolbox inner tools onto the unified StrokeIQ-desktop palette.
   Link AFTER strokeiq-design.css. Each page sets its own --app-accent inline.
   ============================================================================ */

:root {
  /* default accent; each page overrides via inline <style> */
  --app-accent: #E88D67;

  /* Legacy token names → suite palette.
     !important so they win over each page's own inline :root (which loads later). */
  --primary:        var(--app-accent) !important;
  --primary-hover:  color-mix(in srgb, var(--app-accent) 80%, #000) !important;
  --primary-light:  color-mix(in srgb, var(--app-accent) 14%, transparent) !important;
  --bg:             #F8FAFC !important;
  --bg-card:        #FFFFFF !important;
  --surface:        #FAFBFC !important;
  --text:           #282D32 !important;
  --text-muted:     #8C9196 !important;
  --text-tertiary:  #8C9196 !important;
  --text-dim:       #AEB3B8 !important;
  --border:         #E6EBF0 !important;
  --border-strong:  #D4DCE4 !important;
}

[data-theme="dark"] {
  --bg-card:       #26282B !important;
  --surface:       #202124 !important;
  --text:          #ECEFF2 !important;
  --text-muted:    #9AA0A6 !important;
  --text-tertiary: #9AA0A6 !important;
  --text-dim:      #7B8086 !important;
  --border:        #36383C !important;
  --border-strong: #45484C !important;
}

html, body {
  background: linear-gradient(180deg, var(--bg-start) 0%, var(--bg-end) 100%) fixed !important;
  color: var(--text);
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 30% 25%, var(--warm-glow), transparent 60%),
    radial-gradient(circle at 75% 70%, var(--cool-glow), transparent 60%);
}

/* Turn the old solid-color bar into the StrokeIQ topbar */
.app-header {
  background: color-mix(in srgb, var(--bg-card) 80%, transparent) !important;
  backdrop-filter: saturate(140%) blur(10px);
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.app-header h1,
.app-header h1 .accent { color: var(--text) !important; }
.app-header p,
.app-header .header-status { color: var(--text-muted) !important; }
.brand-mark {
  background: color-mix(in srgb, var(--app-accent) 14%, transparent) !important;
  border: none !important;
  color: var(--app-accent) !important;
}
.brand-mark svg { stroke: var(--app-accent); }
.back-link {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
}
.back-link:hover { border-color: var(--app-accent) !important; color: var(--app-accent) !important; }

/* Suite logo lockup (added to each inner header) */
.siq-logo {
  font-weight: 800; font-size: 1.05rem; letter-spacing: 0.06em;
  color: var(--text); text-decoration: none; text-transform: uppercase;
}
.siq-logo span { color: var(--primary-strong); }