/* ============================================================
   VYLORIX — Fonts Stylesheet
   Google Fonts imports and typography base rules
   ============================================================ */

/* Import Google Fonts — loaded here for modularity */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;0,900;1,400;1,700&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:wght@300;400;600;700;900&display=swap');

/* ——— Font face fallback notes ———
   Primary heading: Playfair Display (serif, elegant, highly legible at large sizes)
   Body text:       Lora (humanist serif, excellent for long-form reading)
   UI / labels:     Source Sans 3 (clean sans-serif, accessible for navigation, forms)
*/

/* ——— Font-size scale (senior-friendly, WCAG AA) ——— */
/*
  Base:   18px / 1rem  (comfortable reading for seniors)
  Small:  14–15px (0.78–0.85rem) — used for metadata, captions
  Large:  20–22px (1.1–1.2rem)   — used for lead paragraphs
  XL:     24–28px (1.3–1.55rem)  — used for h4/h3
  2XL:    32–40px (1.75–2.2rem)  — used for h2
  3XL:    48–58px (2.6–3.2rem)   — used for h1
*/

/* ——— Minimum contrast ratios ———
  Body text on white:    #1a1a2e on #ffffff = 15.5:1 ✅ (WCAG AAA)
  Muted text on white:   #4a5568 on #ffffff = 6.7:1  ✅ (WCAG AA)
  Primary CTA text:      white on #1a5276  = 9.1:1   ✅ (WCAG AA)
  Accent CTA text:       #154360 on #e8a020= 5.2:1   ✅ (WCAG AA)
*/

/* ——— Additional typographic utilities ——— */
.vylorix-font-heading   { font-family: 'Playfair Display', Georgia, serif; }
.vylorix-font-body      { font-family: 'Lora', Georgia, serif; }
.vylorix-font-ui        { font-family: 'Source Sans 3', 'Segoe UI', sans-serif; }

.vylorix-text-xs    { font-size: 0.78rem; }
.vylorix-text-sm    { font-size: 0.88rem; }
.vylorix-text-base  { font-size: 1rem; }
.vylorix-text-lg    { font-size: 1.1rem; }
.vylorix-text-xl    { font-size: 1.25rem; }
.vylorix-text-2xl   { font-size: 1.55rem; }
.vylorix-text-3xl   { font-size: 2rem; }

.vylorix-fw-light   { font-weight: 300; }
.vylorix-fw-regular { font-weight: 400; }
.vylorix-fw-medium  { font-weight: 500; }
.vylorix-fw-semibold{ font-weight: 600; }
.vylorix-fw-bold    { font-weight: 700; }
.vylorix-fw-black   { font-weight: 900; }

.vylorix-lh-tight   { line-height: 1.2; }
.vylorix-lh-snug    { line-height: 1.4; }
.vylorix-lh-normal  { line-height: 1.6; }
.vylorix-lh-relaxed { line-height: 1.8; }
.vylorix-lh-loose   { line-height: 2.0; }

/* ——— Drop cap for articles ——— */
.vylorix-dropcap::first-letter {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 4.5em;
  font-weight: 700;
  line-height: 0.75;
  float: left;
  margin: 0.05em 0.1em 0 0;
  color: var(--vylorix-primary);
}

/* ——— Pull quote ——— */
.vylorix-pullquote {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--vylorix-primary);
  border-left: 5px solid var(--vylorix-accent);
  padding: 20px 28px;
  margin: 36px 0;
  line-height: 1.6;
}

/* ——— Highlight text ——— */
.vylorix-highlight {
  background: linear-gradient(120deg, rgba(232, 160, 32, 0.22) 0%, rgba(232, 160, 32, 0.22) 100%);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ——— Monospace / code snippets ——— */
.vylorix-code {
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  background: #f0f4f8;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #c8d6e5;
}

/* ——— Senior-friendly interactive elements ——— */
/* Ensure all clickable items have at least 44×44px touch targets */
.vylorix-btn, button, a { min-height: 44px; }
.vylorix-btn { display: inline-flex; align-items: center; justify-content: center; }