/* =====================================================================
   TheDentist.ai — PROFESSIONAL theme (HauteMD-inspired luxury, dark)
   Loaded ONLY by professional-facing pages (for-dentists, portal,
   practitioner, council, meritchannel). Never on consumer pages.

   Matches the Haute MD aesthetic: deep midnight-navy canvas, near-black
   chrome, metallic champagne gold, white high-contrast serif headlines.
   Loaded AFTER colors_and_type.css + styles.css so it overrides tokens.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap');

:root {
  /* ---- Luxury core (named, for direct use) ---- */
  --lux-navy:      #0C1A2E;  /* page canvas — deep midnight navy */
  --lux-navy-2:    #102236;  /* elevated surface — cards, inputs */
  --lux-navy-3:    #16293E;  /* hover surface */
  --lux-header:    #0A0C12;  /* masthead + footer — near-black */
  --lux-black:     #0A0C12;  /* alias */
  --lux-gold:      #C9A24B;  /* metallic champagne gold */
  --lux-gold-soft: #DCC179;  /* lighter gold — hover, accents */
  --lux-gold-deep: #A8842F;  /* deeper gold */
  --lux-ivory:     #F4F1E9;  /* white-ivory headline text */
  --lux-muted:     #8C95A3;  /* muted blue-grey body text */
  --lux-line:      rgba(201, 162, 75, 0.30); /* gold hairline */

  /* ---- Token overrides (cascade over colors_and_type.css) ---- */
  --ink:    #0A0C12;   /* masthead/footer near-black */
  --paper:  #0C1A2E;   /* page background — dark navy */
  --bone:   #102236;   /* card surface — navy */
  --seal:   #C9A24B;   /* primary accent — gold */
  --sage:   #6E8A86;

  --gold:   #C9A24B;

  --ink-1:  #F4F1E9;   /* primary text — light */
  --ink-2:  #B7BDC7;   /* secondary text — light */
  --ink-3:  #8C95A3;   /* tertiary text — muted */
  --ink-4:  #5E6878;   /* placeholder, disabled */
  --ink-5:  rgba(201, 162, 75, 0.22);  /* gold-tinted hairline */
  --ink-6:  rgba(255, 255, 255, 0.06);

  --paper-2: #102236;
  --bone-2:  #16293E;
  --bone-3:  #1C3149;

  --ok:    #6FBF8F;
  --info:  #B7BDC7;

  --ok-tint:    rgba(111, 191, 143, 0.14);
  --info-tint:  rgba(183, 189, 199, 0.12);
  --sage-tint:  rgba(110, 138, 134, 0.16);
  --seal-tint:  rgba(201, 162, 75, 0.16);
  --gold-tint:  rgba(201, 162, 75, 0.16);
  --alert-tint: rgba(192, 57, 43, 0.18);

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lift: 0 8px 18px rgba(0, 0, 0, 0.4), 0 30px 60px rgba(0, 0, 0, 0.5);

  /* ---- Typography — high-contrast serif display ---- */
  --font-display: "Playfair Display", "Source Serif 4", "Tiempos Headline", Georgia, serif;
}

/* Page canvas + thin gold rule at the very top */
html, body {
  background: var(--paper);
  color: var(--ink-1);
}
body { border-top: 3px solid var(--lux-gold); }

/* Display + headings — white high-contrast serif */
.t-display-xl, .t-display-lg, .t-display-md, .t-display-sm,
h1, h2, h3, h4, .t-h1, .t-h2, .t-h3, .t-h4, .t-display {
  color: var(--lux-ivory);
}
.t-display-xl, .t-display-lg, .t-display-md, .t-display-sm,
h1, h2, .t-h1, .t-h2, .t-display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* Eyebrows — champagne gold, wide tracking */
.t-eyebrow {
  color: var(--lux-gold);
  letter-spacing: 0.18em;
  font-weight: 700;
}
.t-tier { color: var(--lux-gold); letter-spacing: 0.16em; }
.t-meta, .disclosure, .t-fine { color: var(--ink-3); }

/* Links — gold */
a, .t-link { color: var(--lux-gold-soft); text-decoration-color: var(--lux-line); }
a:hover, .t-link:hover { color: var(--lux-gold); text-decoration-color: var(--lux-gold); }

::selection { background: rgba(201, 162, 75, 0.30); color: var(--lux-ivory); }

/* =====================================================================
   MASTHEAD — near-black, ivory text, gold accents
   ===================================================================== */
.masthead {
  background: var(--lux-header);
  border-bottom: 1px solid var(--lux-line);
}
.masthead .brand,
.masthead .brand:hover,
.masthead .wordmark { color: var(--lux-ivory); }

.masthead .nav-links a {
  color: rgba(244, 241, 233, 0.72);
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.12em;
  font-weight: 500;
  text-decoration: none;
}
.masthead .nav-links a:hover { color: var(--lux-gold-soft); }

.masthead .btn-ghost { color: rgba(244, 241, 233, 0.84); }
.masthead .btn-ghost:hover { color: var(--lux-gold-soft); }
.masthead .btn-primary {
  background: var(--lux-gold);
  color: var(--lux-navy);
  border-color: var(--lux-gold);
}
.masthead .btn-primary:hover { background: var(--lux-gold-soft); }

.masthead .hamburger span { background: var(--lux-ivory); }
.masthead .hamburger:hover { background: rgba(244, 241, 233, 0.12); }

/* Mobile menu — dark sheet */
.mobile-menu { background: var(--lux-header); border-bottom: 1px solid var(--lux-line); }
.mobile-menu .mm-link { color: rgba(244, 241, 233, 0.82); }
.mobile-menu .mm-link:hover { color: var(--lux-gold-soft); }

/* =====================================================================
   BUTTONS — gold primary, gold-outline secondary, all uppercase
   ===================================================================== */
.btn, .btn-d {
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.btn-primary,
.btn-d.btn-pri,
.btn-pri,
.btn-seal {
  background: var(--lux-gold);
  color: var(--lux-navy);
  border-color: var(--lux-gold);
}
.btn-primary:hover,
.btn-d.btn-pri:hover,
.btn-pri:hover,
.btn-seal:hover { background: var(--lux-gold-soft); }

.btn-secondary,
.btn-tertiary,
.btn-d.btn-sec,
.btn-sec {
  background: transparent;
  color: var(--lux-gold-soft);
  border: 1px solid var(--lux-line);
}
.btn-secondary:hover,
.btn-tertiary:hover,
.btn-d.btn-sec:hover,
.btn-sec:hover {
  background: rgba(201, 162, 75, 0.10);
  border-color: var(--lux-gold);
  color: var(--lux-gold);
}
.btn-ghost { color: rgba(244, 241, 233, 0.84); }
.btn-ghost:hover { color: var(--lux-gold-soft); }

/* =====================================================================
   SURFACES — navy cards, gold hairline borders
   ===================================================================== */
.card, .feat, .panel, .stat-card, .reveal-axis, .what-we-wont,
.chair, .mc-right .panel, .post {
  background: var(--lux-navy-2);
  border: 1px solid var(--ink-5);
}
.what-we-wont { border-left: 3px solid var(--lux-gold); }
.card-paper { background: var(--lux-navy-2); }

/* =====================================================================
   FORM INPUTS — dark fields, light text
   ===================================================================== */
.field input, .field select, .field textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="tel"], input[type="search"], input[type="number"],
textarea, select {
  background: var(--lux-navy-2);
  color: var(--ink-1);
  border: 1px solid var(--ink-5);
}
.field input:focus, .field select:focus, .field textarea:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--lux-gold);
}
::placeholder { color: var(--ink-4); }
.field label { color: var(--ink-2); }

/* =====================================================================
   FOOTER — near-black, muted light text, gold links
   ===================================================================== */
.footer {
  background: var(--lux-header);
  border-top: 1px solid var(--lux-line);
}
.footer,
.footer p,
.footer span,
.footer .t-meta,
.footer .t-fine,
.footer .footer-col,
.footer .disclosure { color: rgba(244, 241, 233, 0.6); }
.footer .t-eyebrow { color: var(--lux-gold); }
.footer a { color: rgba(244, 241, 233, 0.82); }
.footer a:hover { color: var(--lux-gold-soft); }
.footer .footer-grid { border-bottom-color: rgba(244, 241, 233, 0.14); }

/* =====================================================================
   PILLS / BADGES
   ===================================================================== */
.pill { background: var(--lux-navy-2); color: var(--ink-1); border-color: var(--ink-5); }
.pill-active { background: var(--lux-gold); color: var(--lux-navy); border-color: var(--lux-gold); }

/* Section-heading gold rule — opt-in via .lux-rule */
.lux-rule::after {
  content: "";
  display: block;
  width: 48px;
  height: 2px;
  background: var(--lux-gold);
  margin-top: var(--s-3);
}