/* Flora's type system: two fonts, used the same way on every page.
   Playfair Display = headings and prices only (upright, never italic).
   DM Sans          = everything people read: body copy, quotes, labels, buttons, admin. */
:root {
  --app-font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --app-font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
}
html, body {
  font-family: var(--app-font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}
h1, h2, h3, h4, .font-serif { font-weight: 400; letter-spacing: -0.005em; font-feature-settings: "lnum" 1, "kern" 1; }

/* No decorative italics anywhere. */
.italic, em, i:not([class*="lucide"]) { font-style: normal !important; }

/* Hero tagline: upright serif, regular weight. */
.italic.font-serif.font-light { font-weight: 400; letter-spacing: 0.01em; }

/* Testimonials and other long serif passages read in DM Sans. */
.text-xl.italic.font-serif {
  font-family: var(--app-font-sans);
  font-size: 1.0625rem;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0;
}

/* Small serif panel titles (admin, "Need consultation?") switch to the sans; prices stay serif. */
.font-serif.text-lg:is(.mb-1, .mb-2, .mb-6) {
  font-family: var(--app-font-sans);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
}

/* Readable minimum sizes and calmer letter-spacing on the small caps labels. */
.text-\[9px\] { font-size: 10.5px; }
.text-\[10px\] { font-size: 11px; }
.text-\[11px\] { font-size: 11.5px; }
.tracking-\[0\.4em\], .tracking-\[0\.3em\], .tracking-\[0\.25em\] { letter-spacing: 0.18em; }
.tracking-widest { letter-spacing: 0.12em; }

/* Thin grey body text is hard to read on cream; use regular weight. */
.font-light { font-weight: 400; }
p { font-weight: 400; }

/* Form controls and buttons use the site font instead of the browser default. */
button, input, select, textarea { font-family: inherit; }

/* Prices and numbers line up. */
.font-serif, td, .tabular { font-variant-numeric: lining-nums; }
td { font-variant-numeric: tabular-nums lining-nums; }