/* ---------- TOKENS (old palette) ---------- */
:root{
  --red:#d32f2f;
  --red-600:#b71c1c;
  --red-400:#ef5350;

  --white:#ffffff;
  --black:#0d0d0d;
  --gray-900:#151515;
  --gray-800:#1e1e1e;
  --gray-700:#2a2a2a;
}

/* ---------- LIGHT THEME ---------- */
body.theme-light{
  --bg: var(--white);
  --text:#111;
  --muted:#545b63;

  --surface:#f7f7f7;
  --surface-2:#ffffff;
  --nav-surface:#ffffff;
  --footer-surface:#f5f5f5;

  --accent: var(--red);
  --accent-contrast:#fff;

  --card-border:#ececec;

  --hero-overlay-from: rgba(255,255,255,0);
  --hero-overlay-to:   rgba(211,47,47,.25);
}

/* ---------- DARK THEME (red + black + gray) ---------- */
body.theme-dark{
  --bg: var(--black);
  --text:#f1f1f1;
  --muted:#c7c7c7;

  --surface: var(--gray-900);
  --surface-2: var(--gray-800);
  --nav-surface:#000;
  --footer-surface:#000;

  --accent: var(--red);
  --accent-contrast:#fff;

  --card-border:#2b2b2b;

  --hero-overlay-from: rgba(0,0,0,.82);
  --hero-overlay-to:   rgba(211,47,47,.35);
}

/* Optional red glow like the old feel */
body.theme-dark {
  background:
    radial-gradient(1200px 600px at 50% 0%,
      color-mix(in srgb, var(--accent) 28%, transparent) 0%,
      color-mix(in srgb, var(--accent) 12%, transparent) 38%,
      transparent 70%)
    , var(--bg);
}

/* ---------- GLOBAL ---------- */
body{ background: var(--bg); color: var(--text); }
a{ color: var(--accent); }
.brand-text{ color: var(--accent); }
.brand-accent{ color: #d62222; }
.heading-text{ color: var(--text); }
.body-text{ color: var(--text); }
.muted-text{ color: var(--muted); }
.nav-surface{ background: var(--nav-surface); }
.footer-surface{ background: var(--footer-surface); }

/* ---------- BUTTONS ---------- */
.btn-accent{
  background: var(--accent);
  color: var(--accent-contrast);
  border: 1px solid var(--accent);
  border-radius: 999px;
}
.btn-accent:hover{ background: var(--red-600); border-color: var(--red-600); }

.btn-outline-accent{
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
}
.btn-outline-accent:hover{ color:#fff; background: var(--accent); }

/* ---------- SURFACES / CARDS ---------- */
.surface{ background: var(--surface); }
.surface-2{ background: var(--surface-2); }

.card-x{
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--card-border);
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-x:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 36px rgba(211,47,47,.18);
}
.icon-disc{
  width: 62px; height: 62px;
  margin: 0 auto 10px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 26px; color:#fff;
  background: radial-gradient(circle at 30% 30%, var(--red-400), var(--accent) 70%);
}

/* ---------- HERO ---------- */
.hero{
  min-height: 92vh;
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(135deg, var(--hero-overlay-from), var(--hero-overlay-to));
  color: var(--text);
}
.hero-title{ font-size: clamp(2rem, 5vw, 3.5rem); line-height:1.15; }
.hero-subtitle{ font-size: clamp(1rem, 2.1vw, 1.25rem); }

/* ---------- DARK THEME FIXES ---------- */
.theme-dark #features h2,
.theme-dark #services h2,
.theme-dark .nav-link { color: var(--text) !important; }
.theme-dark #features > .container > p,
.theme-dark #services > .container > p { color: var(--muted) !important; }
.theme-dark .card-x{
  background: var(--gray-800) !important;
  border-color: var(--gray-700) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.theme-dark .card-x h5,
.theme-dark .card-x h6 { color: var(--text) !important; }
.theme-dark .card-x p { color: var(--muted) !important; }