:root{
  --color-900: #454545;
  --color-blue: #3a8dff;
  --color-accent: #ff6b5e;
  --color-yellow: #ffd666;
  --color-bg: #f8f8f8;
  --color-muted: #eaeaea;
  --text-default: #454545;
}

/* Layout and background */
body{
  background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-muted) 100%) !important;
  color: var(--text-default) !important;
}

header{
  background: var(--color-bg) !important;
  box-shadow: 0 2px 8px rgba(69,69,69,0.06) !important;
}

/* Logo: keep the gradient accent but use the new accent colours */
.logo{
  background-image: linear-gradient(90deg, var(--color-blue) 0%, var(--color-accent) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

.back-link{ color: var(--color-blue) !important; }
.tagline{ color: rgba(69,69,69,0.85) !important; }

/* Headings and copy */
.page-header h1,
.intro h1,
.tile h2,
.feature h3{
  color: var(--color-900) !important;
}

.page-header p,
.intro p,
.tile p,
.feature p,
footer p{
  color: rgba(69,69,69,0.85) !important;
}

/* Icons and accents */
.page-icon svg,
.tile-icon,
.feature-icon{
  color: var(--color-blue) !important;
}

.tile::before{
  background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-accent) 100%) !important;
}

/* Cards and containers */
.tile,
.demo-container{
  background: #ffffff !important;
  border: 1px solid var(--color-muted) !important;
}

.demo-intro{ border-bottom-color: var(--color-muted) !important; }

/* Widget area: neutral background (no saturated tint) */
.widget-container{
  background: transparent !important;
  padding: 0 !important;
  min-height: auto !important;
}

/* CTAs and interactive elements */
.cta, .tile .cta{ color: var(--color-blue) !important; border-color: rgba(58,141,255,0.12) !important; }

button{
  background: linear-gradient(90deg, var(--color-blue), var(--color-accent)) !important;
  color: #ffffff !important;
  border: none !important;
}

input, textarea{
  border: 1px solid var(--color-muted) !important;
  background: #ffffff !important;
  color: var(--color-900) !important;
}

footer{
  background: var(--color-bg) !important;
  color: rgba(69,69,69,0.8) !important;
  box-shadow: none !important;
  border-top: 1px solid var(--color-muted) !important;
}

/* Small status text */
.init-status{ color: var(--color-900) !important; }

/* Utility tweaks for contrast */
a:hover, a:focus{ color: var(--color-accent) !important; }

/* Ensure SVG strokes that use currentColor pick up our colors */
svg{ color: inherit !important; }

/* Standardize feature card layout across demo pages */
.features{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) !important;
  gap: 2rem !important;
  margin-top: 3rem !important;
}

.feature{
  text-align: center !important;
  padding: 1.5rem !important;
  background: transparent !important;
}

.feature-icon{
  font-size: 2.5rem !important;
  margin-bottom: 1rem !important;
  color: var(--color-blue) !important;
}

.feature-icon svg{
  width: 40px !important;
  height: 40px !important;
  display: block !important;
  margin: 0 auto 0.75rem !important;
  color: inherit !important;
}

.feature h3{
  font-size: 1.25rem !important;
  color: var(--color-900) !important;
  margin-bottom: 0.75rem !important;
}

.feature p{
  color: rgba(69,69,69,0.85) !important;
  line-height: 1.6 !important;
  font-size: 0.95rem !important;
}