/* ═══════════════════════════════════════════════════════
   Farm Diamond — Global CSS (Redesigned)
   Variables · Reset · Typography · Layout Utilities
   ═══════════════════════════════════════════════════════ */

/* ─── CSS Custom Properties ──────────────────────────── */
:root {
  /* Brand Colors - Reference Image */
  --fd-orange:        #FF6B35;
  --fd-orange-dark:   #E55A24;
  --fd-orange-light:  #FF8F60;
  --fd-blue:          #1E5CA8;
  --fd-blue-light:    #2E6EC0;
  --fd-yellow:        #FFD23F;
  --fd-cream:         #FFF8E7;
  --fd-cream-dark:    #FFF0CC;
  --fd-charcoal:      #2D2D2D;
  --fd-charcoal-mid:  #555555;
  --fd-muted:         #777777;
  --fd-border:        #EAD9C0;
  --fd-white:         #FFFFFF;

  /* Legacy aliases */
  --fd-navy:          #1E5CA8;
  --fd-navy-dark:     #163F7A;
  --fd-tan:           #FFF0CC;
  --fd-text:          #2D2D2D;
  --fd-gold:          #FFD23F;

  /* Radius - chunky rounded */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 50px;

  /* Transitions */
  --transition: all 0.3s ease-in-out;

  /* Shadows */
  --shadow-card:  0 4px 12px rgba(0,0,0,0.08);
  --shadow-hover: 0 12px 32px rgba(0,0,0,0.14);
  --shadow-nav:   0 2px 20px rgba(0,0,0,0.08);
}

/* ─── Box Model Reset ────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* ─── Google Fonts Import ────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=Inter:wght@400;500;600&display=swap');

/* ─── Base Body ──────────────────────────────────────── */
body {
  font-family: 'Inter', 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  background: var(--fd-cream);
  color: var(--fd-charcoal);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Typography — Chunky Rounded Headings ───────────── */
h1, h2, h3, h4 {
  font-family: 'Nunito', 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 800;
  line-height: 1.15;
  color: var(--fd-charcoal);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(40px, 5.5vw, 60px); }
h2 { font-size: clamp(30px, 4vw, 42px); }
h3 { font-size: clamp(22px, 3vw, 30px); font-weight: 700; }
h4 { font-size: clamp(17px, 2vw, 22px); font-weight: 700; }

p { line-height: 1.65; }

em {
  color: var(--fd-orange);
  font-style: normal;
}

strong { font-weight: 800; }

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul, ol { list-style: none; }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, select, textarea { font-family: inherit; }

/* ─── Sections ───────────────────────────────────────── */
section {
  padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 80px);
}

.fd-section-inner {
  max-width: 1280px;
  margin: 0 auto;
}

/* ─── Section Label Utilities ────────────────────────── */
.section-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--fd-orange);
  text-transform: uppercase;
  font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  margin-bottom: 14px;
  background: rgba(255,107,53,0.1);
  padding: 5px 14px;
  border-radius: var(--radius-pill);
}

.section-title { margin-bottom: 16px; }

.section-sub {
  font-size: 17px;
  color: var(--fd-charcoal-mid);
  max-width: 560px;
  line-height: 1.65;
}

/* ─── Focus Visible ──────────────────────────────────── */
:focus-visible { outline: 2px solid var(--fd-orange); outline-offset: 3px; }