/* ─────────────────────────────────────────
   Yeowly.com — Global Design Tokens & Base
   ───────────────────────────────────────── */

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

/* Tokens */
:root {
  /* Palette — derived from the Yeowly logo mark */
  --navy:       #15719B;      /* primary brand / headers — logo blue */
  --navy-2:     #1C83B5;      /* hover states, depth — logo mid-blue */
  --ink:        #22282D;      /* body text — softened logo charcoal */
  --ink-2:      #414B52;      /* secondary text */
  --ink-3:      #64838F;      /* muted / captions — logo slate-blue */
  --rule:       #DCE4E7;      /* borders, dividers */
  --surface:    #FFFFFF;
  --surface-2:  #F3F6F7;      /* alt section background */
  --surface-3:  #E7EDEF;      /* subtle highlights */

  /* Accent — logo orange */
  --green:      #E67D2F;
  --green-d:    #C45419;
  --green-faint:#FCF0E5;
  --green-mid:  rgba(230,125,47,.12);

  /* Type */
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;

  /* Layout */
  --max-w:      1180px;
  --gutter:     clamp(20px, 4vw, 48px);
  --section-v:  clamp(72px, 10vw, 120px);

  color-scheme: light;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; }

/* Typography scale */
h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.4rem, 5.5vw, 4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--navy);
}
h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--navy);
}
h3 {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
p { color: var(--ink-3); }

/* Utilities */
.container {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section          { padding-block: var(--section-v); }
.section--alt     { background: var(--surface-2); }
.section--ruled   { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.section--navy    { background: var(--navy); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
}

.lead {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  color: var(--ink-3);
  max-width: 52ch;
  line-height: 1.75;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border-radius: 5px;
  font-weight: 500;
  font-size: .875rem;
  text-decoration: none;
  padding: .7rem 1.5rem;
  transition: background .18s, color .18s, border-color .18s, transform .15s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }

.btn--primary {
  background: var(--navy);
  color: #fff;
  border: 1.5px solid var(--navy);
}
.btn--primary:hover { background: var(--navy-2); border-color: var(--navy-2); }

.btn--green {
  background: var(--green);
  color: #fff;
  border: 1.5px solid var(--green);
}
.btn--green:hover { background: var(--green-d); border-color: var(--green-d); }

.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--rule);
}
.btn--outline:hover { border-color: var(--ink-3); }

.btn--outline-white {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.35);
}
.btn--outline-white:hover { border-color: rgba(255,255,255,.7); }

/* Divider */
.rule { width: 40px; height: 2px; background: var(--green); border-radius: 1px; margin-block: 1.5rem; }