:root{
  --mode: light;
  --bg-body: #fafafa;
  --text-body: #3e3c3c;
  --border-color: #23272a;
  --link: #0d6efd;
  --link-hover: #0a58ca;
  --bg-hero: #164a97d5;

  --primary: #ff0000;
  --accent: #6610f2;
  --success: #198754;
  --warning: #ffc107;
  --danger:  #dc3545;

  --bg-navbar: #f0f0ff;
  --text-navbar: #000000;
  --bg-footer: #25598d;
  --text-footer: #ffffff;

  --bg-card: #23272a;
  --text-card: #ffffff;

  --btn-primary-bg: #0d6efd;
  --btn-primary-fg: #ffffff;
  --btn-primary-hover: #000000;

  --btn-secondary-bg: #6c757d;
  --btn-secondary-fg: #ffffff;
  --btn-secondary-hover: #5c636a;
}

/* --------- Global --------- */
html,body{ background: var(--bg-body); color: var(--text-body); }
a{ color: var(--link); }
a:hover{ color: var(--link-hover); }
.hr, hr{ border-color: var(--border-color); }

/* Hero */
.hero, .service-hero{ background: var(--bg-hero); }
.hero h1, .service-hero h1{ color: var(--text-body); }

/* Navbar / Footer */
.navbar{ background: var(--bg-navbar) !important; }
.navbar a, .navbar .nav-link, .navbar-brand{ color: var(--text-navbar) !important; }
.footer{ background: var(--bg-footer); color: var(--text-footer); }

/* Cards */
.card{ background: var(--bg-card); color: var(--text-card); border-color: var(--border-color); }

/* Buttons */
.btn-primary{ background: var(--btn-primary-bg) !important; border-color: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; }
.btn-primary:hover{ background: var(--btn-primary-hover) !important; border-color: var(--btn-primary-hover) !important; }
.btn-secondary{ background: var(--btn-secondary-bg) !important; border-color: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important; }
.btn-secondary:hover{ background: var(--btn-secondary-hover) !important; border-color: var(--btn-secondary-hover) !important; }

/* Utilities */
.badge-primary{ background: var(--primary); }
.text-primary{ color: var(--primary) !important; }
.bg-primary{ background: var(--primary) !important; }
.alert-success{ background: color-mix(in srgb, var(--success) 10%, white); border-color: var(--success); color: #064d1a; }
.alert-warning{ background: color-mix(in srgb, var(--warning) 12%, white); border-color: var(--warning); color: #7a4b00; }
.alert-danger{  background: color-mix(in srgb, var(--danger) 10%, white);  border-color: var(--danger);  color: #7a1020; }