/* ==========================================================================
   Savvy Weddings — Design Tokens
   Source: SavvyWeddings-BrandOnaPage.png (Eden Brands, May 2024)
   ========================================================================== */

/* ---- Fonts (locally hosted — uploaded brand fonts) --------------------- */
@font-face {
  font-family: "PT Sans Narrow";
  src: url("fonts/PTSansNarrow-Bold.ttf") format("truetype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Poppins";
  src: url("fonts/Poppins-SemiBold.ttf") format("truetype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Caveat Brush";
  src: url("fonts/CaveatBrush-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
/* Bellenia Love — the script used in the Savvy Weddings logo lockup. */
@font-face {
  font-family: "Bellenia Love";
  src: url("fonts/Bellenia_Love.otf") format("opentype"),
       url("fonts/Bellenia_Love.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}

:root {
  /* ---- Brand color core (canonical names) ---------------------------- */
  --pine:        #004F42;   /* deep brand green — Pantone 3302 U  (anchor) */
  --emerald:     #0A7A66;   /* mid-green sibling to Pine */
  --mint:        #93D8CE;   /* primary mint     — Pantone 572 U            */
  --pistachio:   #D6F2EC;   /* lightest mint    — Pantone 9521 U           */
  --ivory:       #FFFAF6;   /* paper / page bg                             */
  --peach:       #FFD3C3;   /* soft peach       — Pantone 489 U            */
  --coral:       #FC7859;   /* accent coral     — Pantone 2026 U           */
  --coal:        #2D2D2D;   /* near-black text  — Pantone 4147 U           */

  /* ---- Backwards-compat aliases (do not use in new work) ------------- */
  --ink-teal:    var(--pine);
  --mint-50:     var(--pistachio);
  --cream:       var(--ivory);
  --ink:         var(--coal);

  /* ---- Functional aliases ------------------------------------------- */
  --bg:          var(--cream);
  --surface:     #FFFFFF;
  --surface-2:   var(--mint-50);
  --text:        var(--ink);
  --text-muted:  #5A5A5A;
  --text-on-dark: var(--cream);
  --line:        #E8E2DA;        /* warm hairline, not gray */
  --line-strong: #D6CEC2;

  --primary:     var(--ink-teal);
  --primary-hover: #003a30;
  --primary-press: #002b24;
  --on-primary:  var(--cream);

  --accent:      var(--coral);
  --accent-hover: #f0613f;
  --on-accent:   #FFFFFF;

  /* Status (derived to live in-palette) */
  --success:     #1f8a5b;
  --warning:     #c98a2b;
  --danger:      #c44a3a;        /* coral cousin */
  --info:        var(--ink-teal);

  /* ---- Type ramp (1.25 — major third) ------------------------------- */
  --font-display: "PT Sans Narrow", "Arial Narrow", sans-serif;
  --font-ui:      "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-script:  "Bellenia Love", "Caveat Brush", "Brush Script MT", cursive;
  --font-logo:    "Bellenia Love", "Caveat Brush", "Brush Script MT", cursive;

  --fs-12: 0.75rem;     /* eyebrow, micro */
  --fs-14: 0.875rem;    /* small, captions */
  --fs-16: 1rem;        /* body */
  --fs-18: 1.125rem;    /* lead body */
  --fs-20: 1.25rem;     /* h5 */
  --fs-24: 1.5rem;      /* h4 */
  --fs-30: 1.875rem;    /* h3 */
  --fs-38: 2.375rem;    /* h2 */
  --fs-48: 3rem;        /* h1 / display-sm */
  --fs-64: 4rem;        /* display */
  --fs-80: 5rem;        /* hero */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-loose:    1.65;

  --tr-display:  -0.01em;
  --tr-tight:    -0.005em;
  --tr-eyebrow:  0.12em;

  /* ---- Spacing (4px base) ------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii ------------------------------------------------------- */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 16px;
  --r-lg: 28px;
  --r-xl: 40px;
  --r-pill: 999px;

  /* ---- Shadows (only two — keep it print-soft) --------------------- */
  --shadow-card: 0 1px 2px rgba(45,45,45,.04), 0 8px 24px -12px rgba(0,79,66,.18);
  --shadow-pop:  0 4px 8px rgba(45,45,45,.06), 0 24px 48px -16px rgba(0,79,66,.28);

  /* ---- Motion ------------------------------------------------------ */
  --ease:        cubic-bezier(.2,.7,.2,1);
  --dur-fast:    140ms;
  --dur:         220ms;
  --dur-slow:    360ms;

  /* ---- Layout ------------------------------------------------------ */
  --container:   1200px;
  --container-narrow: 880px;
  --section-pad-y: var(--space-24);
}

/* ---- Base reset (light) ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  line-height: var(--lh-loose);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Type primitives ---------------------------------------------- */
.display, .h1, .h2, h1, h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  color: var(--ink-teal);
  margin: 0;
}
.h3, .h4, h3, h4 {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--ink);
  margin: 0;
}
h5, h6, .h5, .h6 {
  font-family: var(--font-ui);
  font-weight: 600;
  margin: 0;
}

.display    { font-size: clamp(var(--fs-48), 6vw, var(--fs-80)); }
.h1, h1     { font-size: clamp(var(--fs-38), 4.4vw, var(--fs-64)); }
.h2, h2     { font-size: clamp(var(--fs-30), 3.2vw, var(--fs-48)); }
.h3, h3     { font-size: var(--fs-30); }
.h4, h4     { font-size: var(--fs-24); }
.h5, h5     { font-size: var(--fs-20); }

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-12);
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--ink-teal);
}
.lead { font-size: var(--fs-18); line-height: var(--lh-loose); color: var(--text-muted); }
.script {
  font-family: var(--font-script);
  font-weight: 500;
  font-size: var(--fs-30);
  color: var(--ink-teal);
  line-height: 1.1;
}

p { margin: 0 0 var(--space-4); }
a { color: var(--ink-teal); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--coral); }

/* ---- Components: buttons ----------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: 1;
  padding: 14px 22px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary   { background: var(--primary); color: var(--on-primary); }
.btn-primary:hover { background: var(--primary-hover); }
.btn-accent    { background: var(--accent); color: var(--on-accent); }
.btn-accent:hover  { background: var(--accent-hover); }
.btn-ghost     { background: transparent; color: var(--ink-teal); border-color: var(--ink-teal); }
.btn-ghost:hover { background: var(--mint-50); }
.btn-quiet     { background: var(--surface); color: var(--ink-teal); border-color: var(--line); }
.btn-quiet:hover { border-color: var(--ink-teal); }
.btn-sm { padding: 10px 16px; font-size: var(--fs-14); }
.btn-lg { padding: 18px 28px; font-size: var(--fs-18); }

/* ---- Components: inputs ------------------------------------------ */
.input, .textarea, .select {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--fs-16);
  color: var(--text);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--ink-teal);
  box-shadow: 0 0 0 3px rgba(147,216,206,.45);
}
.label {
  display: block;
  font-weight: 600;
  font-size: var(--fs-14);
  color: var(--ink);
  margin-bottom: var(--space-2);
}
.help { font-size: var(--fs-12); color: var(--text-muted); margin-top: var(--space-1); }

/* ---- Components: card -------------------------------------------- */
.card {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-6);
}
.card-cream { background: var(--cream); }
.card-mint  { background: var(--mint-50); }

/* ---- Components: badge / chip ------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--fs-12);
  padding: 6px 10px;
  border-radius: var(--r-pill);
  background: var(--mint-50);
  color: var(--ink-teal);
  letter-spacing: 0.02em;
}
.badge-coral { background: var(--peach); color: #8a3526; }
.badge-teal  { background: var(--ink-teal); color: var(--cream); }
.badge-cream { background: var(--cream); color: var(--ink-teal); border: 1px solid var(--mint); }

/* ---- Highlight (Bellenia Love) ----------------------------------- */
.highlight {
  font-family: var(--font-script);
  color: var(--coral);
  font-weight: 400;
  white-space: nowrap;
}

/* ---- Section wrappers -------------------------------------------- */
.container       { max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); }
.container-narrow{ max-width: var(--container-narrow); margin-inline: auto; padding-inline: var(--space-6); }
.section         { padding-block: var(--section-pad-y); }
.section-mint    { background: var(--mint-50); }
.section-cream   { background: var(--cream); }
.section-teal    { background: var(--ink-teal); color: var(--cream); }
.section-teal .h1, .section-teal h1, .section-teal h2 { color: var(--cream); }

/* ---- Utility ----------------------------------------------------- */
.stack > * + * { margin-top: var(--space-4); }
.stack-tight > * + * { margin-top: var(--space-2); }
.stack-loose > * + * { margin-top: var(--space-8); }
.row   { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; }
.between { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; }
.grid  { display: grid; gap: var(--space-6); }
.text-muted { color: var(--text-muted); }
.text-teal  { color: var(--ink-teal); }
.text-coral { color: var(--coral); }
.bg-mint  { background: var(--mint); }
.bg-mint-50 { background: var(--mint-50); }
.bg-peach { background: var(--peach); }
.bg-coral { background: var(--coral); color: #fff; }
.bg-teal  { background: var(--ink-teal); color: var(--cream); }
.bg-cream { background: var(--cream); }

.rounded-sm { border-radius: var(--r-sm); }
.rounded-md { border-radius: var(--r-md); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-pill { border-radius: var(--r-pill); }

.divider { height: 1px; background: var(--line); border: 0; margin: var(--space-8) 0; }