/* ==========================================================
   Xilo Theme — Light + Dark modes
   Based on teal accent, calm neutrals, and coral highlights.
   ========================================================== */

:root {
  /* Base colors */
  --bs-body-bg: #F7F8F8;
  --bs-body-color: #2E2F33;

  /* Brand palette */
  --xilo-primary: #1BB0A5;
  --xilo-primary-dark: #0F4F4C;
  --xilo-highlight: #FF8C42;
  --xilo-mist: #D7F1EE;
  --xilo-neutral: #2E2F33;

  /* Bootstrap mappings */
  --bs-primary: var(--xilo-primary);
  --bs-secondary: var(--xilo-mist);
  --bs-success: #20c997;
  --bs-info: #1BB0A5;
  --bs-warning: var(--xilo-highlight);
  --bs-danger: #ff6b6b;
  --bs-light: #FFFFFF;
  --bs-dark: var(--xilo-primary-dark);

  /* Borders and surfaces */
  --bs-border-color: #E4E7E7;
  --bs-card-bg: #FFFFFF;
  --bs-card-border-color: #E4E7E7;
  --bs-nav-link-color: var(--xilo-primary-dark);
  --bs-nav-link-hover-color: var(--xilo-primary);
}

/* Dark mode variant */
[data-bs-theme="dark"] {
  --bs-body-bg: #121617;
  --bs-body-color: #E4E7E7;

  --xilo-primary: #1BB0A5;
  --xilo-primary-dark: #0F4F4C;
  --xilo-highlight: #FF8C42;
  --xilo-mist: #4C555B;
  --xilo-neutral: #E4E7E7;

  --bs-primary: var(--xilo-primary);
  --bs-secondary: var(--xilo-mist);
  --bs-light: #1E2324;
  --bs-dark: #0F4F4C;
  --bs-border-color: #2C3435;
  --bs-card-bg: #1E2324;
  --bs-card-border-color: #2C3435;
  --bs-nav-link-color: var(--xilo-neutral);
  --bs-nav-link-hover-color: var(--xilo-primary);
}

/* Rounded geometry to match logo */
.btn, .form-control, .card, .nav-link, .alert, .badge, .input-group-text {
  border-radius: 0.75rem !important;
}

/* Transition for theme switching */
body {
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Site-specific tweaks */
.hero {
  text-align: center;
  padding: 6rem 1rem;
}
.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.section {
  padding: 4rem 1rem;
}
.feature-icon {
  font-size: 2rem;
  color: var(--xilo-primary);
}
footer {
  text-align: center;
  padding: 2rem;
  color: var(--xilo-neutral);
  font-size: 0.9rem;
}
.navbar-brand svg {
  height: 28px;
}
.table td, .table th { vertical-align: middle; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }

/* ==========================================================
   Xilo Typography
   ========================================================== */

/* Font imports */
@import url("https://api.fontshare.com/v2/css?f[]=satoshi@400,500,600,700&display=swap");

body, button, input, select, textarea {
  font-family: "Satoshi", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Satoshi", "Inter", sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--bs-body-color);
}

h1.display-4, h2.display-5 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.card-title {
  font-weight: 600;
}

.btn {
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Pricing emphasis */
.card h2 {
  font-weight: 700;
  color: var(--xilo-primary-dark);
}

small, .text-muted {
  font-weight: 400;
  color: #6c757d !important;
}