/* ============================================================
   Christian Dating Do's and Don'ts — design tokens + base
   Warm, faith-forward. Cream & burnt orange. Serif headlines.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Warm cream surfaces */
  --cream: #F5EDE4;
  --cream-deep: #EFE3D3;
  --cream-edge: #E6D7C2;
  --white: #FFFFFF;
  --paper: #FBF7F1;

  /* Burnt orange — primary */
  --orange: #C8622A;
  --orange-deep: #A6501F;
  --orange-soft: #F2DCC6;        /* tag background */
  --orange-tint: #F8E8D7;
  --orange-text: #8E441A;

  /* Text */
  --ink: #2A211B;
  --ink-soft: #4D3F35;
  --ink-mute: #8A7868;
  --ink-faint: #B4A593;

  /* Life-stage hues (warm-tuned) */
  --stage-seeking: #C8622A;
  --stage-seeking-bg: #F8E1CB;
  --stage-dating: #7B4A8F;
  --stage-dating-bg: #ECDDF1;
  --stage-engaged: #B98328;
  --stage-engaged-bg: #F4E4BF;
  --stage-starting: #4E6F94;
  --stage-starting-bg: #DCE5F0;

  /* System */
  --line: #E6D7C2;
  --line-strong: #CDB99D;
  --shadow-soft: 0 1px 2px rgba(74, 47, 22, 0.04), 0 4px 12px rgba(74, 47, 22, 0.05);
  --shadow-card: 0 1px 3px rgba(74, 47, 22, 0.06), 0 8px 24px rgba(74, 47, 22, 0.06);
  --shadow-lift: 0 12px 32px rgba(74, 47, 22, 0.14);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 9999px;

  /* Type */
  --serif: "Fraunces", "Iowan Old Style", "Palatino", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

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

html, body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button { font-family: inherit; }
a { color: inherit; }

/* Reusable serif/sans helpers */
.serif { font-family: var(--serif); font-optical-sizing: auto; }
.sans  { font-family: var(--sans); }

/* Subtle paper grain — applied via overlay div in app */
.paper-grain {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(120, 80, 40, 0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: var(--r-pill);
  border: none; cursor: pointer;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  transition: transform 120ms ease, background 160ms ease, box-shadow 160ms ease, color 160ms ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--orange); color: var(--white); box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 8px 18px rgba(200, 98, 42, 0.28); }
.btn-primary:hover { background: var(--orange-deep); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { color: var(--orange); }
.btn-outline { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--white); }
.btn-sm { height: 38px; padding: 0 16px; font-size: 14px; }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16px; }

/* Cards */
.card {
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
}

/* Inputs */
.input {
  width: 100%; height: 48px;
  padding: 0 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--paper);
  font-family: var(--sans); font-size: 15px; color: var(--ink);
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(200, 98, 42, 0.12);
  background: var(--white);
}

/* Animations */
@keyframes fadeIn   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes popIn    { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes pulseDot { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }

.fade-in { animation: fadeIn 360ms cubic-bezier(0.2, 0.7, 0.2, 1.0) both; }
.pop-in  { animation: popIn 240ms cubic-bezier(0.34, 1.4, 0.64, 1.0) both; }
.slide-up{ animation: slideUp 480ms cubic-bezier(0.2, 0.7, 0.2, 1.0) both; }

/* Scrollbar — warm */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--cream-edge); border-radius: var(--r-pill); border: 2px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* Selection */
::selection { background: rgba(200, 98, 42, 0.22); color: var(--ink); }

/* Utility */
.container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.eyebrow {
  font-family: var(--sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--orange-text);
}