/* ═══════════════════════════════════════════════════════════
   DMEHelper Design System — "Warm + Competent + Trust"
   "Like a nurse who has seen everything and still holds your hand."

   SINGLE SOURCE OF TRUTH for design tokens.
   All other CSS files reference these variables.
   ═══════════════════════════════════════════════════════════ */

/* ── CLS Fix: Adjusted fallback fonts to match web font metrics ──────────
   PageSpeed recommendation: reserve space before Lora/Inter load.
   size-adjust scales the fallback so text occupies the same space as the
   web font — eliminates line-height reflow when fonts swap in.
   ─────────────────────────────────────────────────────────────────────── */

/* Inter fallback — calibrated against Inter's ascent/descent metrics */
@font-face {
  font-family: 'Inter-fallback';
  src: local('Arial');
  size-adjust: 107%;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* Lora fallback — calibrated against Lora's serif ascent/descent metrics */
@font-face {
  font-family: 'Lora-fallback';
  src: local('Georgia');
  size-adjust: 104%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

:root {
  /* ── Color Palette: Warm Neutrals + Trustworthy Teal ────── */

  /* Backgrounds — soft, warm, never sterile */
  --bg-primary:     #faf8f4;     /* Main page background — warm off-white */
  --bg-surface:     #ffffff;     /* Cards, modals, elevated surfaces */
  --bg-cream:       #fef7f3;     /* Accent background — soft cream */
  --bg-warm-white:  #f9f3ee;     /* Subtle warm surface */
  --bg-muted:       #f3ede7;     /* Subdued sections, hover states */

  /* Primary: Deep Teal — clinical trust + human warmth */
  --teal:           #2a8a96;     /* Primary interactive — buttons, links */
  --deep-teal:      #1a6068;     /* Headers, active states, emphasis */
  --navy:           #164a52;     /* Darkest teal — pressed states */
  --teal-light:     rgba(42, 138, 150, 0.08); /* Teal tint for backgrounds */
  --teal-mist:      rgba(42, 138, 150, 0.04); /* Barely-there teal wash */

  /* Accent: Warm Gold — approachable, human */
  --gold:           #c88b62;     /* Accent CTA, highlights */
  --gold-dark:      #a97350;     /* Gold hover state */
  --gold-light:     rgba(200, 139, 98, 0.12); /* Gold tint */
  --coral:          #d4785e;     /* Secondary warm accent */

  /* Text — warm grays, never cold */
  --text-primary:   #2a2420;     /* Headings, strong emphasis — contrast 14.5:1 on white ✅ */
  --text-body:      #4a4540;     /* Body text — warm charcoal — contrast 8.1:1 on white ✅ */
  /* PageSpeed Accessibility: darkened for WCAG AA compliance (was #7a7268 = 4.13:1, now 6.1:1) */
  --text-secondary: #605850;     /* Helper text, captions — contrast 6.1:1 on white ✅ */
  /* PageSpeed Accessibility: darkened for WCAG AA compliance (was #9b9088 = 2.76:1, now 4.8:1) */
  --text-muted:     #6e6860;     /* Placeholders, disabled — contrast 4.8:1 on white ✅ */
  --text-inverse:   #ffffff;     /* Text on dark backgrounds */

  /* Borders & Dividers — warm, subtle */
  --border-default: #e8e0d8;     /* Standard borders */
  --border-light:   #f0e8e0;     /* Subtle dividers */
  --border-teal:    rgba(42, 138, 150, 0.18); /* Teal-tinted borders */

  /* Shadows — warm-tinted, never harsh */
  --shadow-sm:      0 1px 3px rgba(42, 36, 30, 0.06);
  --shadow-md:      0 4px 12px rgba(42, 36, 30, 0.08);
  --shadow-lg:      0 8px 24px rgba(42, 36, 30, 0.1);
  --shadow-xl:      0 16px 40px rgba(42, 36, 30, 0.12);
  --shadow-teal:    0 4px 16px rgba(42, 138, 150, 0.12);

  /* ── Typography ─────────────────────────────────────────── */

  /* Headings: Lora — contemporary serif, warm + authoritative */
  /* CLS: 'Lora-fallback' is size-adjusted Georgia — eliminates font-swap reflow */
  --font-heading:   'Lora', 'Lora-fallback', Georgia, 'Times New Roman', serif;

  /* Body: Inter — clean sans-serif, easy on tired eyes */
  /* CLS: 'Inter-fallback' is size-adjusted Arial — eliminates font-swap reflow */
  --font-body:      'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Scale — generous, readable */
  --text-xs:        0.8125rem;   /* 13px */
  --text-sm:        0.875rem;    /* 14px */
  --text-base:      1rem;        /* 16px — minimum body */
  --text-lg:        1.125rem;    /* 18px */
  --text-xl:        1.25rem;     /* 20px */
  --text-2xl:       1.5rem;      /* 24px */
  --text-3xl:       1.875rem;    /* 30px */
  --text-4xl:       2.25rem;     /* 36px */
  --text-5xl:       3rem;        /* 48px */

  /* Line heights — generous for readability */
  --leading-tight:  1.3;         /* Headings */
  --leading-snug:   1.45;        /* Subheadings */
  --leading-normal: 1.65;        /* Body text */
  --leading-relaxed: 1.75;       /* Long-form prose */

  /* ── Spacing — "walking into a quiet room" ─────────────── */

  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Border Radius ─────────────────────────────────────── */
  --radius-sm:   0.375rem;  /* 6px — small elements */
  --radius-md:   0.5rem;    /* 8px — buttons, inputs */
  --radius-lg:   0.75rem;   /* 12px — cards */
  --radius-xl:   1rem;      /* 16px — large cards, modals */
  --radius-2xl:  1.25rem;   /* 20px — hero cards */
  --radius-full: 9999px;    /* Pills, avatars */

  /* ── Transitions ───────────────────────────────────────── */
  --ease-default:  cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;

  /* ── Layout ────────────────────────────────────────────── */
  --max-width-prose: 72ch;       /* Optimal reading width */
  --max-width-content: 72rem;    /* 1152px content area */
  --header-height: 56px;
  --nav-height: 64px;
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Base Styles ─────────────────────────────────────────── */

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background-color: var(--bg-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: var(--leading-tight);
  color: var(--text-primary);
  font-weight: 600;
  letter-spacing: -0.01em;
}

h1 { font-size: var(--text-4xl); font-weight: 700; }
h2 { font-size: var(--text-3xl); font-weight: 700; }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  line-height: var(--leading-normal);
  max-width: var(--max-width-prose);
}

a {
  /* PageSpeed Accessibility: deep-teal (#1a6068) has 6.78:1 contrast on white (was --teal #2a8a96 = 3.9:1, failed WCAG AA) */
  color: var(--deep-teal);
  transition: color var(--duration-fast) var(--ease-default);
}
a:hover {
  color: var(--navy);
}

/* ── Selection ───────────────────────────────────────────── */
::selection {
  background: rgba(42, 138, 150, 0.15);
  color: var(--text-primary);
}

/* ── Focus visible (keyboard users) ──────────────────────── */
:focus-visible {
  outline: 2.5px solid var(--teal);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ── Utility: design system classes ──────────────────────── */

/* Warm card elevation */
.ds-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-normal) var(--ease-default),
              border-color var(--duration-fast) var(--ease-default);
}
.ds-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-teal);
}

/* Warm section spacing */
.ds-section {
  padding: var(--space-16) var(--space-4);
}
@media (min-width: 768px) {
  .ds-section {
    padding: var(--space-20) var(--space-6);
  }
}

/* Warm button */
.ds-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--teal);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  /* PageSpeed Accessibility: 48px touch target minimum (was 44px) */
  min-height: 48px;
  transition: background var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
}
.ds-btn-primary:hover {
  background: var(--deep-teal);
}
.ds-btn-primary:active {
  transform: scale(0.98);
  background: var(--navy);
}

.ds-btn-warm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  background: var(--gold);
  color: var(--text-inverse);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--text-sm);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  /* PageSpeed Accessibility: 48px touch target minimum (was 44px) */
  min-height: 48px;
  transition: background var(--duration-fast) var(--ease-default),
              transform var(--duration-fast) var(--ease-default);
  -webkit-tap-highlight-color: transparent;
}
.ds-btn-warm:hover {
  background: var(--gold-dark);
}
.ds-btn-warm:active {
  transform: scale(0.98);
}