:root{
  /* Palette adopted from mosaix.art */
  --bg: #0a0b0d;
  --surface: #111317;
  --text: #f0f3f8;
  --muted: #a9b0bb;
  --accent: #ff6645; /* primary accent */
  --accent-2: #f92ffb; /* secondary accent */
  --accent-grad: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%);
  --radius: 12px;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --btn-bg: #0047ff;
  --btn-bg-2: #ffffff;

  /* Bootstrap mappings */
  --bs-primary: var(--accent);
  --bs-secondary: var(--muted);
  --bs-body-bg: var(--bg);
  --bs-body-color: var(--text);
}

/* Background gradient like landing page */
html, body{
  background-image: linear-gradient(180deg, rgb(26, 72, 244) 0%, rgb(12, 42, 147) 100%);
  color: var(--text);
  height: 100%;
}

/* Surfaces and elements */
.bg-surface{ background-color: var(--surface) !important; }
.bg-surface-subtle{ background-color: #161922 !important; }
.card{ border-radius: var(--radius); box-shadow: var(--shadow); background-color: var(--surface); border: 1px solid rgba(255,255,255,0.06); }
.navbar{ --bs-navbar-color: var(--muted); --bs-navbar-brand-color: #fff; }
.table{
  /* Ensure readable table text and zebra rows on dark backgrounds */
  --bs-table-color: #a9b0bb;               /* medium grey text */
  --bs-table-bg: var(--surface);           /* base surface */
  --bs-table-striped-bg: #161922;          /* slightly lighter than base */
  --bs-table-striped-color: #a9b0bb;       /* keep medium grey on striped rows */
  --bs-table-hover-bg: #1a1d2b;            /* hover surface */
  --bs-table-hover-color: #a9b0bb;         /* readable on hover */
  --bs-border-color: rgba(255,255,255,0.08);
}
.form-control, .form-select{ background-color: #0f1116; color: var(--text); border-color: rgba(255,255,255,0.14); }
.form-control::placeholder{ color:#a9b0bb; opacity:1; }
.alert{ color:#000 !important; }

/* Buttons */
.btn-primary{
  color: #fff;
  background-image: var(--accent-grad);
  background-color: transparent;
  border: none;
}
.btn-outline-light{ --bs-btn-color:#5b6470; --bs-btn-border-color:#5b6470; }
.btn-outline-light:hover{ --bs-btn-color:#3f4650; --bs-btn-border-color:#3f4650; }

/* Typography (use Inter as fallback for now) */
h1,h2,h3,h4,h5,h6{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji"; }

/* Utilities */
.hero{ background: transparent; }
.swatch{ border:1px solid rgba(255,255,255,.15); }

/* Sticky layout: header stays on top, footer on bottom, content scrolls between */
body{ min-height:100vh; display:flex; flex-direction:column; }
main{ flex:1 0 auto; }
footer{ position: sticky; bottom: 0; z-index: 1020; }
/* Badges: ensure dark text on colored backgrounds */
.badge{ color:#000; }
.badge.text-bg-primary,
.badge.text-bg-secondary,
.badge.text-bg-success,
.badge.text-bg-warning,
.badge.text-bg-danger,
.badge.text-bg-info,
.badge.text-bg-dark,
.badge.text-bg-light{ color:#000 !important; }
/* Brand header styles to mirror mosaix.art */
.navbar.bg-white{ --bs-navbar-color:#1b1f23; --bs-navbar-brand-color:#0a0b0d; }
.navbar .nav-link{ color:#1b1f23; }
.navbar .nav-link:hover{ color:#000; }
.brand-tld{ color:#ff5145; font-weight:800; position:relative; top:2px; }

/* Avatar */
.avatar-circle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background: var(--surface); color: var(--text); font-weight:700; font-size: 1rem;
  border:1px solid rgba(255,255,255,0.15);
}
.avatar-circle img{ width:100%; height:100%; object-fit:cover; border-radius:50%; display:block; }
.avatar-btn{ padding:2px; }

/* Footer: medium grey text, keep light links white */
footer.bg-surface-subtle{ color:#a9b0bb !important; }
footer.bg-surface-subtle .link-light{ color:#ffffff !important; }

/* Make secondary/muted text medium grey for readability on dark bg */
.text-body-secondary{ color:#a9b0bb !important; }
.text-muted{ color:#a9b0bb !important; }

/* Home sections styling to align with mosaix.art */
.section-plans, .section-roadmap{
  background: linear-gradient(180deg,#1428b3 0%,#0b195f 100%);
  border-radius:16px;
  padding:24px;
  border:1px solid rgba(255,255,255,0.06);
}
.section-plans .subtitle, .section-roadmap .subtitle{color:#cfd3da}
.section-plans h2, .section-roadmap h2{color:#f0f3f8}
.plan-price{color:#ff4da3}
.roadmap-highlight{ border:2px solid #ff4da3 !important; box-shadow: 0 0 0 2px rgba(255,77,163,0.15) inset; }