/* =========================================================
   Adam & Rachel Wedding — Color & Type Foundations
   Reference this file from any HTML artifact in this system.
   ========================================================= */

/* =========================================================
   TC Seraphine — brand display & editorial face
   ========================================================= */
@font-face {
  font-family: 'TC Seraphine';
  src: url('../fonts/tc_seraphine_light-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphine_light-webfont.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine';
  src: url('../fonts/tc_seraphine_italic_light-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphine_italic_light-webfont.woff') format('woff');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine';
  src: url('../fonts/tc_seraphine_regular-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphine_regular-webfont.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine';
  src: url('../fonts/tc_seraphine_italic-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphine_italic-webfont.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine';
  src: url('../fonts/tc_seraphine_bold-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphine_bold-webfont.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine';
  src: url('../fonts/tc_seraphine_italic_bold-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphine_italic_bold-webfont.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* =========================================================
   TC Seraphine Round — secondary brand display cut
   (softer letterforms; reserved for monogram, italic
    flourishes and decorative use. Italic files are shipped
    as "seraphone" — kept on disk under that spelling.)
   ========================================================= */
@font-face {
  font-family: 'TC Seraphine Round';
  src: url('../fonts/tc_seraphine_round_light-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphine_round_light-webfont.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine Round';
  src: url('../fonts/tc_seraphone_round_light_italic-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphone_round_light_italic-webfont.woff') format('woff');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine Round';
  src: url('../fonts/tc_seraphine_round_regular-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphine_round_regular-webfont.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine Round';
  src: url('../fonts/tc_seraphone_round_italic-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphone_round_italic-webfont.woff') format('woff');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine Round';
  src: url('../fonts/tc_seraphine_round_bold-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphine_round_bold-webfont.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'TC Seraphine Round';
  src: url('../fonts/tc_seraphone_round_bold_italic-webfont.woff2') format('woff2'),
       url('../fonts/tc_seraphone_round_bold_italic-webfont.woff') format('woff');
  font-weight: 700; font-style: italic; font-display: swap;
}

/* =========================================================
   Inter — brand UI & body face
   Variable font — covers 100–900 weight + italic axis.
   ========================================================= */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter-Italic-VariableFont.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* ---------- COLOR — primary ---------- */
  --ivory:        #F8F4EC;  /* default page background */
  --warm-white:   #FDFBF6;  /* subtle contrast surfaces */
  --hunter-green: #355E3B;  /* primary type + UI */
  --crimson:      #8B1A1A;  /* accent — CTAs, countdown, emphasis */

  /* ---------- COLOR — supporting ---------- */
  --pine:          #1F3A24; /* deep type, footer, hover on hunter */
  --sage:          #6B7F66; /* secondary copy, captions, labels */
  --bone:          #E8E0CF; /* hairlines, card borders */
  --mist:          #EFEAE0; /* hover backgrounds, stripes */
  --antique-brass: #A8884F; /* fleurons, monogram — DECORATIVE ONLY */

  /* ---------- COLOR — crimson hover ---------- */
  --crimson-deep:  #6E1212;

  /* ---------- SEMANTIC COLOR ---------- */
  --bg:        var(--ivory);
  --bg-alt:    var(--warm-white);
  --bg-hover:  var(--mist);
  --fg:        var(--hunter-green);
  --fg-strong: var(--pine);
  --fg-muted:  var(--sage);
  --fg-accent: var(--crimson);
  --border:    var(--bone);
  --ornament:  var(--antique-brass);

  /* ---------- TYPE — families ----------
     Brand faces: TC Seraphine (display, editorial) and
     TC Seraphine Round (UI, body, forms). --serif and
     --sans are kept as token names for back-compat with
     CSS that thinks in serif/sans terms, but BOTH are
     custom brand faces in this system.
  */
  --serif:        'TC Seraphine', 'EB Garamond', Garamond, Georgia, serif;
  --sans:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'TC Seraphine', 'EB Garamond', Garamond, Georgia, serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-round:   'TC Seraphine Round', 'TC Seraphine', Georgia, serif;

  /* ---------- TYPE — base scale (desktop) ---------- */
  --display-xl: 5.5rem;   /* 88px — hero "Adam & Rachel"      */
  --display-lg: 4rem;     /* 64px — page titles               */
  --h1:         3rem;     /* 48px — major section headers     */
  --h2:         2.25rem;  /* 36px — sub-sections              */
  --h3:         1.5rem;   /* 24px — card titles               */
  --body-lg:    1.1875rem;/* 19px — opening paragraphs        */
  --body:       1rem;     /* 16px — default body              */
  --body-sm:    0.875rem; /* 14px — captions, helper          */
  --eyebrow:    0.75rem;  /* 12px — section labels (UPPERCASE)*/
  --caption:    0.75rem;  /* 12px — image captions            */

  /* ---------- SPACING ---------- */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;
  --space-11:  160px;

  /* ---------- LAYOUT ---------- */
  --content-max: 1280px;
  --page-max:    1440px;
  --gutter-d:    64px;
  --gutter-m:    24px;

  /* ---------- RADIUS ---------- */
  --radius-sm: 2px;  /* buttons */
  --radius:    4px;  /* cards   */

  /* ---------- BORDERS ---------- */
  --hairline: 1px solid var(--bone);

  /* ---------- MOTION ---------- */
  --t-fast: 200ms ease-out;
  --t-base: 400ms ease-out;
  --t-slow: 600ms ease-out;
}

/* =========================================================
   Mobile scale — display sizes ~30–35% smaller
   ========================================================= */
@media (max-width: 720px) {
  :root {
    --display-xl: 3.5rem;   /* 56 */
    --display-lg: 2.75rem;  /* 44 */
    --h1:         2.25rem;  /* 36 */
    --h2:         1.75rem;  /* 28 */
    --h3:         1.375rem; /* 22 */
  }
}

/* =========================================================
   SEMANTIC ELEMENT DEFAULTS
   Apply by linking this stylesheet — these set sensible
   defaults so plain HTML "just looks right."
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}

h1 { font-size: var(--h1); line-height: 1.15; letter-spacing: -0.005em; }
h2 { font-size: var(--h2); line-height: 1.2;  }
h3 { font-size: var(--h3); line-height: 1.3;  }

p  { margin: 0; }

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--t-fast);
}
a:hover { color: var(--fg-accent); }

hr {
  border: 0;
  border-top: var(--hairline);
  margin: var(--space-8) 0;
}

::selection {
  background: var(--hunter-green);
  color: var(--ivory);
}

/* ---------- Display / hero ---------- */
.display-xl {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--display-xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.display-lg {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--display-lg);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ---------- Eyebrow — section label motif ---------- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
}

/* ---------- Body variants ---------- */
.body-lg { font-size: var(--body-lg); line-height: 1.6; }
.body-sm { font-size: var(--body-sm); line-height: 1.5; color: var(--fg-muted); }
.caption { font-size: var(--caption); letter-spacing: 0.02em; color: var(--fg-muted); }

/* Editorial body — long-form copy set in Cormorant */
.editorial {
  font-family: var(--serif);
  font-size: 1.25rem;   /* ~20px */
  line-height: 1.65;
  font-weight: 400;
}

/* ---------- Italic Cormorant for date/location ---------- */
.italic-display {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

/* =========================================================
   BUTTONS — primary / secondary / crimson
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 32px;
  border-radius: var(--radius-sm);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
  text-decoration: none;
}
@media (max-width: 720px) { .btn { height: 48px; } }

.btn-primary {
  background: var(--hunter-green);
  color: var(--ivory);
}
.btn-primary:hover { background: var(--pine); }

.btn-secondary {
  background: transparent;
  color: var(--hunter-green);
  border-color: var(--hunter-green);
}
.btn-secondary:hover { background: var(--hunter-green); color: var(--ivory); }

.btn-crimson {
  background: var(--crimson);
  color: var(--ivory);
}
.btn-crimson:hover { background: var(--crimson-deep); }

/* =========================================================
   FORM INPUTS
   ========================================================= */
.field-label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--hunter-green);
  margin-bottom: var(--space-2);
}
.field-required { color: var(--crimson); margin-left: 2px; }

.input,
.textarea,
.select {
  width: 100%;
  height: 56px;
  padding: 0 16px;
  background: var(--ivory);
  border: 1px solid var(--bone);
  border-radius: var(--radius);
  font-family: var(--sans);
  font-size: 16px;
  color: var(--hunter-green);
  transition: border-color var(--t-fast);
}
.textarea { height: auto; padding: 16px; line-height: 1.5; resize: vertical; }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--hunter-green);
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
  background: var(--warm-white);
  border: var(--hairline);
  border-radius: var(--radius);
  padding: var(--space-6);
}
.card-mist {
  background: var(--mist);
  border: 0;
  border-radius: var(--radius);
  padding: var(--space-6);
}

/* =========================================================
   ORNAMENTAL DIVIDER
   ========================================================= */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--antique-brass);
  font-size: 14px;
  letter-spacing: 1em;
  padding: var(--space-7) 0;
}