@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&display=swap");

/**
 * EndoNeuroSpine tokens mapped onto Bootstrap 5.3 CSS variables.
 * Do not recreate Bootstrap's full color or spacing systems here.
 *
 * Logo palette: gold primary, burgundy secondary.
 * Light-mode links use burgundy so body copy meets WCAG AA.
 */

:root {
  color-scheme: light;
  --ens-primary: #fac34b;
  --ens-secondary: #4f001b;
  --ens-on-primary: #4f001b;
  --ens-on-secondary: #fac34b;
  --ens-bg: #fbf7ef;
  --ens-surface: #ffffff;
  --ens-text: #2a151c;
  --ens-heading: #4f001b;
  --ens-muted: #6b4a52;
  --ens-border: #e4d4b8;

  --bs-primary: var(--ens-primary);
  --bs-primary-rgb: 250, 195, 75;
  --bs-secondary: var(--ens-secondary);
  --bs-secondary-rgb: 79, 0, 27;
  --bs-body-bg: var(--ens-bg);
  --bs-body-color: var(--ens-text);
  --bs-body-color-rgb: 42, 21, 28;
  --bs-emphasis-color: var(--ens-heading);
  --bs-secondary-color: var(--ens-muted);
  --bs-tertiary-bg: #fbf7ef;
  --bs-tertiary-bg-rgb: 251, 247, 239;
  --bs-border-color: var(--ens-border);
  --bs-link-color: var(--ens-secondary);
  --bs-link-color-rgb: 79, 0, 27;
  --bs-link-hover-color: #360012;
  --bs-link-hover-color-rgb: 54, 0, 18;
  --bs-focus-ring-color: rgba(250, 195, 75, 0.45);
  --bs-card-bg: var(--ens-surface);
  --bs-card-border-color: var(--ens-border);
  --bs-card-cap-bg: var(--ens-surface);
  --bs-body-font-family: "Poppins", system-ui, sans-serif;
  --bs-body-font-size: 0.875rem;

  /* Desktop headings stay 34 / 30 / 24 / 20 / 18. Body, p, buttons: 14px. */
  --ens-fs-body: 0.875rem;
  --ens-fs-btn: 0.875rem;
  --ens-fs-small: 0.75rem;
  --ens-fs-eyebrow: 0.75rem;
  --ens-fs-h1: 1.75rem;
  --ens-fs-h2: 1.5rem;
  --ens-fs-h3: 1.25rem;
  --ens-fs-h4: 1.125rem;
  --ens-fs-h5: 1.125rem;
  --ens-fs-h6: 1rem;
  --ens-lh-heading: 1.2;
  --ens-lh-body: 1.65;

  --ens-space-section: 3.75rem;
  --ens-space-eyebrow: 0.5rem;
  --ens-space-heading: 12px;
  --ens-space-copy: 1.5rem;
  --ens-space-block: 2.5rem;
}

@media (min-width: 768px) {
  :root {
    --ens-space-section: 4.5rem;
    --ens-fs-h1: 1.875rem;
    --ens-fs-h2: 1.625rem;
    --ens-fs-h3: 1.375rem;
    --ens-fs-h4: 1.25rem;
    --ens-fs-h5: 1.125rem;
  }
}

@media (min-width: 992px) {
  :root {
    --ens-space-section: 5.5rem;
    --ens-fs-h1: 2.125rem;
    --ens-fs-h2: 1.875rem;
    --ens-fs-h3: 1.5rem;
    --ens-fs-h4: 1.25rem;
    --ens-fs-h5: 1.125rem;
    --ens-fs-h6: 1rem;
    --ens-fs-body: 0.875rem;
    --ens-fs-btn: 0.875rem;
  }
}