/* =============================================================================
   PharmacyAI — Typography
   src/styles/typography.css
   VERSION: 2
   FROZEN — read CLAUDE.md § Frozen Files before modifying.
   Requires: tokens.css
   All type styles as utility classes matching the brand style guide exactly.

   Changelog:
   v2 (2026-05-14): Added .pa-text-denim utility to round out the .pa-text-*
     family for the PAFooter labels that need --pa-color-denim text on dark bg
     (build prompt 02 / feature/web-marketing-panav).
   v1 (2026-05-14): Initial placement during bootstrap. DM Sans/Mono CDN
     imports removed in favor of next/font Geist loading.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   FONT FACE IMPORTS
   Geist + Geist Mono via CDN (swap to self-hosted for production performance)
------------------------------------------------------------------------------ */

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

/* Geist is loaded via next/font (geist npm package) in src/app/layout.tsx.
   --pa-font-sans and --pa-font-mono in tokens.css resolve through
   --font-geist-sans / --font-geist-mono, bridged in globals.css. */

/* ---------------------------------------------------------------------------
   BASE RESET
------------------------------------------------------------------------------ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--pa-font-sans);
  font-size: var(--pa-body-reg-size);
  font-weight: var(--pa-body-reg-weight);
  line-height: var(--pa-body-reg-leading);
  letter-spacing: var(--pa-body-reg-tracking);
  color: var(--pa-text-primary);
  background-color: var(--pa-bg-primary);
}

/* ---------------------------------------------------------------------------
   SERIF ACCENT — inline only, within a sans heading
   Usage: <h2 class="pa-h2">Core <em class="pa-serif-accent">Values</em></h2>
   Rules:
   - Applied to ONE word or short phrase per heading via <em> tag
   - NEVER applied to the heading element itself
   - Inherits font-size from parent — do not set font-size here
   - Use sparingly: one accent per heading, rare across any given page
   - pa-h-serif-* classes remain for standalone pull quotes and mission text only
------------------------------------------------------------------------------ */

.pa-serif-accent {
  font-family: var(--pa-font-serif);
  font-style: italic;
  font-weight: 400;
  /* font-size intentionally omitted — inherits from parent heading */
}

/* ---------------------------------------------------------------------------
   HEADING CLASSES — Geist Bold
   pa-h1 through pa-h3
------------------------------------------------------------------------------ */

.pa-h1 {
  font-family: var(--pa-font-sans);
  font-size: var(--pa-h1-size);
  font-weight: var(--pa-h1-weight);
  line-height: var(--pa-h1-leading);
  letter-spacing: var(--pa-h1-tracking);
}

.pa-h2 {
  font-family: var(--pa-font-sans);
  font-size: var(--pa-h2-size);
  font-weight: var(--pa-h2-weight);
  line-height: var(--pa-h2-leading);
  letter-spacing: var(--pa-h2-tracking);
}

.pa-h3 {
  font-family: var(--pa-font-sans);
  font-size: var(--pa-h3-size);
  font-weight: var(--pa-h3-weight);
  line-height: var(--pa-h3-leading);
  letter-spacing: var(--pa-h3-tracking);
}

/* ---------------------------------------------------------------------------
   HEADING CLASSES — Playfair Display Italic
   pa-h-serif-large, pa-h-serif-reg, pa-h-serif-small
------------------------------------------------------------------------------ */

.pa-h-serif-large {
  font-family: var(--pa-font-serif);
  font-size: var(--pa-h-serif-lg-size);
  font-weight: var(--pa-h-serif-lg-weight);
  font-style: var(--pa-h-serif-lg-style);
  line-height: var(--pa-h-serif-lg-leading);
  letter-spacing: var(--pa-h-serif-lg-tracking);
}

.pa-h-serif-reg {
  font-family: var(--pa-font-serif);
  font-size: var(--pa-h-serif-reg-size);
  font-weight: var(--pa-h-serif-reg-weight);
  font-style: var(--pa-h-serif-reg-style);
  line-height: var(--pa-h-serif-reg-leading);
  letter-spacing: var(--pa-h-serif-reg-tracking);
}

.pa-h-serif-small {
  font-family: var(--pa-font-serif);
  font-size: var(--pa-h-serif-sm-size);
  font-weight: var(--pa-h-serif-sm-weight);
  font-style: var(--pa-h-serif-sm-style);
  line-height: var(--pa-h-serif-sm-leading);
  letter-spacing: var(--pa-h-serif-sm-tracking);
}

/* ---------------------------------------------------------------------------
   LABEL CLASSES — Geist Mono, UPPERCASE
   pa-h4, pa-h5 (label-scale headings)
------------------------------------------------------------------------------ */

.pa-h4 {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-h4-size);
  font-weight: var(--pa-h4-weight);
  line-height: var(--pa-h4-leading);
  letter-spacing: var(--pa-h4-tracking);
  text-transform: var(--pa-h4-transform);
}

.pa-h5 {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-h5-size);
  font-weight: var(--pa-h5-weight);
  line-height: var(--pa-h5-leading);
  letter-spacing: var(--pa-h5-tracking);
  text-transform: var(--pa-h5-transform);
}

/* ---------------------------------------------------------------------------
   BODY CLASSES — Geist Regular
------------------------------------------------------------------------------ */

.pa-body-lg {
  font-family: var(--pa-font-sans);
  font-size: var(--pa-body-lg-size);
  font-weight: var(--pa-body-lg-weight);
  line-height: var(--pa-body-lg-leading);
  letter-spacing: var(--pa-body-lg-tracking);
}

.pa-body-reg {
  font-family: var(--pa-font-sans);
  font-size: var(--pa-body-reg-size);
  font-weight: var(--pa-body-reg-weight);
  line-height: var(--pa-body-reg-leading);
  letter-spacing: var(--pa-body-reg-tracking);
}

.pa-body-sm {
  font-family: var(--pa-font-sans);
  font-size: var(--pa-body-sm-size);
  font-weight: var(--pa-body-sm-weight);
  line-height: var(--pa-body-sm-leading);
  letter-spacing: var(--pa-body-sm-tracking);
}

/* ---------------------------------------------------------------------------
   BODY SERIF CLASSES — Playfair Display Italic
------------------------------------------------------------------------------ */

.pa-body-serif-lg {
  font-family: var(--pa-font-serif);
  font-size: var(--pa-body-serif-lg-size);
  font-weight: var(--pa-body-serif-lg-weight);
  font-style: var(--pa-body-serif-lg-style);
  line-height: var(--pa-body-serif-lg-leading);
  letter-spacing: var(--pa-body-serif-lg-tracking);
}

.pa-body-serif-reg {
  font-family: var(--pa-font-serif);
  font-size: var(--pa-body-serif-reg-size);
  font-weight: var(--pa-body-serif-reg-weight);
  font-style: var(--pa-body-serif-reg-style);
  line-height: var(--pa-body-serif-reg-leading);
  letter-spacing: var(--pa-body-serif-reg-tracking);
}

.pa-body-serif-sm {
  font-family: var(--pa-font-serif);
  font-size: var(--pa-body-serif-sm-size);
  font-weight: var(--pa-body-serif-sm-weight);
  font-style: var(--pa-body-serif-sm-style);
  line-height: var(--pa-body-serif-sm-leading);
  letter-spacing: var(--pa-body-serif-sm-tracking);
}

/* ---------------------------------------------------------------------------
   LABEL CLASSES — Geist Mono, UPPERCASE
------------------------------------------------------------------------------ */

.pa-label-reg {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-reg-size);
  font-weight: var(--pa-label-reg-weight);
  line-height: var(--pa-label-reg-leading);
  letter-spacing: var(--pa-label-reg-tracking);
  text-transform: var(--pa-label-reg-transform);
}

.pa-label-button {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-button-size);
  font-weight: var(--pa-label-button-weight);
  line-height: var(--pa-label-button-leading);
  letter-spacing: var(--pa-label-button-tracking);
  text-transform: var(--pa-label-button-transform);
}

.pa-label-lg {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-lg-size);
  font-weight: var(--pa-label-lg-weight);
  line-height: var(--pa-label-lg-leading);
  letter-spacing: var(--pa-label-lg-tracking);
  text-transform: var(--pa-label-lg-transform);
}

.pa-label-button-lg {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-button-lg-size);
  font-weight: var(--pa-label-button-lg-weight);
  line-height: var(--pa-label-button-lg-leading);
  letter-spacing: var(--pa-label-button-lg-tracking);
  text-transform: var(--pa-label-button-lg-transform);
}

.pa-label-legal {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-legal-size);
  font-weight: var(--pa-label-legal-weight);
  line-height: var(--pa-label-legal-leading);
  letter-spacing: var(--pa-label-legal-tracking);
  text-transform: var(--pa-label-legal-transform);
}

.pa-label-legal-bold {
  font-family: var(--pa-font-mono);
  font-size: var(--pa-label-legal-bold-size);
  font-weight: var(--pa-label-legal-bold-weight);
  line-height: var(--pa-label-legal-bold-leading);
  letter-spacing: var(--pa-label-legal-bold-tracking);
  text-transform: var(--pa-label-legal-bold-transform);
}

/* ---------------------------------------------------------------------------
   LOGO WORDMARK
   "Pharmacy" in Geist Bold + "AI" in Playfair Display Italic
   Usage: <span class="pa-logo">Pharmacy<em>AI</em></span>
------------------------------------------------------------------------------ */

.pa-logo {
  font-family: var(--pa-font-sans);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  color: var(--pa-text-primary);
  line-height: 1;
}

.pa-logo em {
  font-family: var(--pa-font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--pa-color-mint);
}

/* Logo size variants */
.pa-logo--sm  { font-size: 1rem; }
.pa-logo--md  { font-size: 1.25rem; }   /* default */
.pa-logo--lg  { font-size: 1.75rem; }
.pa-logo--xl  { font-size: 2.5rem; }

/* Logo on light background */
.pa-logo--on-light {
  color: var(--pa-color-midnight);
}
.pa-logo--on-light em {
  color: var(--pa-color-mint);
}

/* ---------------------------------------------------------------------------
   GRADIENT UNDERLINE UTILITY
   For accent lines under headings per brand guide.
   Usage: <span class="pa-underline-gradient">text</span>
------------------------------------------------------------------------------ */

.pa-underline-gradient {
  position: relative;
  display: inline-block;
}

.pa-underline-gradient::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--pa-color-gradient);
  border-radius: 1px;
}

/* ---------------------------------------------------------------------------
   COLOR UTILITIES — text color helpers
------------------------------------------------------------------------------ */

.pa-text-primary   { color: var(--pa-text-primary); }
.pa-text-secondary { color: var(--pa-text-secondary); }
.pa-text-accent    { color: var(--pa-text-accent); }
.pa-text-on-light  { color: var(--pa-text-on-light); }
.pa-text-mint      { color: var(--pa-color-mint); }
.pa-text-bone      { color: var(--pa-color-bone); }
.pa-text-sky       { color: var(--pa-color-sky); }
.pa-text-denim     { color: var(--pa-color-denim); }  /* v2 — footer labels */

/* ---------------------------------------------------------------------------
   PROSE — long-form reading context
------------------------------------------------------------------------------ */

.pa-prose {
  font-family: var(--pa-font-sans);
  font-size: var(--pa-body-reg-size);
  line-height: 1.75;
  letter-spacing: var(--pa-body-reg-tracking);
  color: var(--pa-text-primary);
  max-width: 65ch;
}

.pa-prose p + p    { margin-top: var(--pa-space-4); }
.pa-prose strong   { font-weight: 600; }
.pa-prose em       { font-style: italic; }
.pa-prose a        { color: var(--pa-color-mint); text-underline-offset: 3px; }
.pa-prose a:hover  { opacity: 0.8; }