/* ============================================================
   Coralie — Shared Brand Stylesheet
   Single source of truth for design tokens across every page:
   index.html, intake.html, login.html, signup.html, consent.html.
   Fix a brand value here once, it's fixed everywhere.
   ============================================================ */

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

:root {
  /* Brand */
  --lav: #7B5EA7;
  --lav-lt: #EDE8F5;
  --lav-mid: #C9B8E8;
  --lav-dark: #5A4080;
  --ink: #111111;
  --ink-mid: #444444;
  --ink-lt: #888888;
  --rule: #E2DCF0;
  --page: #FDFCFF;
  --white: #FFFFFF;
  --cream: #F9F7FD;
  --peach: #FBE4D8;

  /* Type */
  /* var(--font-playfair-display)/etc. come from app/layout.tsx's
     next/font/google loaders, self-hosted and reliable — they take
     priority when present (the Next.js app). When that variable is
     undefined (static-site/*.html pages, loaded standalone via a <link>
     tag, no Next.js involved), these fall through to the literal family
     name, which this file's own @import url(fonts.googleapis.com...)
     above already loads correctly there. See layout.tsx's comment on
     why the same @import silently gets dropped once bundled into the
     Next.js app instead. */
  /* Fallback lives INSIDE the var() call, not appended after it — a
     var() reference with no fallback that fails to resolve makes the
     WHOLE declaration invalid (CSS spec: "guaranteed-invalid value"),
     not just that one list item. Without the fallback argument here,
     the entire --font-heading value would be thrown out on the static
     pages (where --font-playfair-display is never defined), and it
     wouldn't even fall through to 'Playfair Display' — the whole
     font-family rule would just be ignored. Caught before it shipped. */
  --font-heading: var(--font-playfair-display, 'Playfair Display'), serif;
  --font-body: var(--font-dm-sans, 'DM Sans'), sans-serif;
  /* Added 2026-08-08 for app/portal/dashboard/page.tsx's tier pill,
     matching design/wireframes/patient-dashboard.html's own local
     DM Mono usage — purely additive, no existing page used this before. */
  --font-mono: var(--font-dm-mono, 'DM Mono'), monospace;
}

/* Wrapped in @layer base (not left unlayered) since this file is also
   imported into app/layout.tsx alongside Tailwind. CSS Cascade Layers
   rule: unlayered styles always beat layered styles regardless of
   specificity or source order -- so a plain, unlayered `* { margin: 0 }`
   here was silently zeroing out every Tailwind margin utility (mx-auto,
   etc.) across the whole Next.js app, since Tailwind's utilities live
   inside @layer utilities. Real bug, found live 2026-08-14 testing
   app/provider/patient/[patientId]/page.tsx -- not just this file's
   problem, every page using mx-auto was affected. @layer base merges
   into Tailwind's own layer order (base < components < utilities), so
   utilities still win, same as this rule's original intent for the
   plain-HTML static-site pages that don't use Tailwind at all. */
@layer base {
  * { box-sizing: border-box; margin: 0; padding: 0; }
}

body {
  font-family: var(--font-body);
  background: var(--page);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---- Nav (shared across every page) ---- */
.nav-brand {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--lav);
  text-decoration: none;
}
.nav-brand em { color: var(--lav); font-style: normal; }

.nav-links a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  text-decoration: none;
  transition: color 0.2s;
  margin-left: 28px;
}
.nav-links a:hover { color: var(--lav); }

.nav-cta {
  background: var(--ink) !important;
  color: var(--white) !important;
  padding: 10px 22px;
  border-radius: 2px;
  font-weight: 500 !important;
  transition: background 0.2s !important;
}
.nav-cta:hover { background: var(--lav) !important; }

.nav-login {
  color: var(--ink-mid);
  font-weight: 500 !important;
}

/* ---- Buttons (shared) ---- */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 24px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: opacity 0.2s, background 0.2s;
}
.btn-primary { background: var(--ink); color: var(--white); }
.btn-primary:hover { opacity: 0.88; }
.btn-primary:disabled { background: var(--ink-lt); cursor: not-allowed; opacity: 0.7; }
.btn-secondary { background: var(--white); color: var(--lav); border: 1px solid var(--lav); }
.btn-secondary:hover { background: var(--lav-lt); }
.btn-full { width: 100%; }

/* ---- Form elements (shared — login, signup, intake) ---- */
.field-group { margin-bottom: 20px; }
.field-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-mid);
  margin-bottom: 6px;
}
.field-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 16px; /* 16px minimum — prevents iOS auto-zoom on focus */
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  background: var(--white);
  min-height: 44px; /* tap target minimum */
}
.field-input:focus { outline: none; border-color: var(--lav); }
.field-hint { font-size: 12px; color: var(--ink-lt); margin-top: 6px; }
.field-error { font-size: 12px; color: #B05030; margin-top: 6px; display: none; }
.field-error.show { display: block; }

/* ---- Auth card (login/signup shared layout) ---- */
.auth-wrap {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 40px 36px;
  box-shadow: 0 4px 40px rgba(0,0,0,0.06);
}
.auth-title {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 500;
  margin-bottom: 8px;
}
.auth-subtitle {
  font-size: 13px;
  color: var(--ink-mid);
  margin-bottom: 28px;
  line-height: 1.5;
}
.auth-footer-link {
  text-align: center;
  font-size: 13px;
  color: var(--ink-mid);
  margin-top: 24px;
}
.auth-footer-link a { color: var(--lav); text-decoration: none; font-weight: 500; }

.auth-banner {
  font-size: 12px;
  padding: 8px 14px;
  border-radius: 4px;
  margin-bottom: 20px;
  display: none;
}
.auth-banner.show { display: block; }
.auth-banner.error { background: var(--peach); color: #8a4a2e; }
.auth-banner.info { background: var(--lav-lt); color: var(--lav-dark); }

/* ---- Utility ---- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }