/*
 * Verdandi — Brand CSS
 * Single source of truth for colors, typography, and design tokens.
 * Import this file into every page: <link rel="stylesheet" href="brand.css">
 *
 * Last updated: April 2026
 * Brand: Verdandi — Rooted in the becoming.
 */

/* ── GOOGLE FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=DM+Sans:wght@300;400;500&display=swap');

/* ── COLOR PALETTE ── */
:root {
  /* Core palette */
  --deep-fjord:   #1C2E28;   /* Primary text, dark backgrounds */
  --fern:         #2E4A3A;   /* Logo mark, hero elements, dark surfaces */
  --forest:       #4E6850;   /* Buttons, links, CTAs */
  --succulent:    #7A9C7A;   /* Hover states, secondary text on dark */
  --sage:         #A8C4A4;   /* Borders, tags, chips, light accent */
  --driftwood:    #A89870;   /* Warm accent, overlines, tagline */
  --frost:        #E4E8E0;   /* Page backgrounds, light surfaces */

  /* Semantic aliases */
  --color-primary:      var(--fern);
  --color-cta:          var(--forest);
  --color-cta-hover:    var(--deep-fjord);
  --color-accent-warm:  var(--driftwood);
  --color-accent-cool:  var(--sage);
  --color-bg:           var(--frost);
  --color-bg-dark:      var(--deep-fjord);
  --color-text:         var(--deep-fjord);
  --color-text-muted:   var(--forest);
  --color-text-on-dark: var(--frost);
}

/* ── TYPOGRAPHY ── */
:root {
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'DM Sans', system-ui, sans-serif;

  /* Type scale */
  --text-display:  clamp(72px, 11vw, 148px);   /* Hero headline */
  --text-h1:       clamp(40px, 5vw, 64px);      /* Section headers */
  --text-h2:       clamp(32px, 4vw, 52px);      /* Sub-section headers */
  --text-h3:       clamp(22px, 2.2vw, 30px);    /* Subheads, taglines */
  --text-lead:     18px;                         /* Intro paragraphs */
  --text-body:     17px;                         /* Body copy */
  --text-small:    15px;                         /* Secondary body */
  --text-ui:       16px;                         /* Buttons, nav */
  --text-caption:  14px;                         /* Captions, footnotes */
  --text-overline: 12px;                         /* Category labels */

  /* Line heights */
  --leading-tight:  0.95;
  --leading-snug:   1.1;
  --leading-normal: 1.4;
  --leading-relaxed: 1.7;
  --leading-loose:  1.75;

  /* Letter spacing */
  --tracking-tight:    -0.025em;
  --tracking-normal:    0;
  --tracking-wide:      0.06em;
  --tracking-wider:     0.12em;
  --tracking-widest:    0.16em;
}

/* ── SPACING ── */
:root {
  --space-xs:   8px;
  --space-sm:   16px;
  --space-md:   24px;
  --space-lg:   40px;
  --space-xl:   56px;
  --space-2xl:  80px;
  --space-3xl:  96px;
  --space-4xl:  120px;

  --section-padding: var(--space-3xl) var(--space-xl);
}

/* ── BORDERS & RADIUS ── */
:root {
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  16px;

  --border-subtle:  0.5px solid rgba(28,46,40,0.08);
  --border-warm:    0.5px solid rgba(168,152,112,0.2);
  --border-green:   0.5px solid rgba(168,196,164,0.15);
  --border-on-dark: 0.5px solid rgba(228,232,224,0.06);
}

/* ── SHADOWS ── */
:root {
  --shadow-card:    0 24px 80px rgba(0,0,0,0.4);
  --shadow-bridge:  0 32px 80px rgba(0,0,0,0.4), 0 0 0 0.5px rgba(168,152,112,0.2);
  --shadow-subtle:  0 4px 24px rgba(28,46,40,0.08);
}

/* ── BASE RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--frost);
  color: var(--deep-fjord);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── TYPOGRAPHY UTILITIES ── */
.serif   { font-family: var(--font-serif); }
.sans    { font-family: var(--font-sans); }

.text-display {
  font-family: var(--font-serif);
  font-size: var(--text-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.text-h1 {
  font-family: var(--font-serif);
  font-size: var(--text-h1);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.text-h2 {
  font-family: var(--font-serif);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--leading-snug);
}

.text-h3-italic {
  font-family: var(--font-serif);
  font-size: var(--text-h3);
  font-weight: 400;
  font-style: italic;
  line-height: var(--leading-normal);
}

.text-overline {
  font-family: var(--font-sans);
  font-size: var(--text-overline);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--driftwood);
}

.text-lead {
  font-size: var(--text-lead);
  line-height: var(--leading-loose);
}

.text-body {
  font-size: var(--text-body);
  line-height: var(--leading-loose);
}

/* ── COLOR UTILITIES ── */
.text-frost      { color: var(--frost); }
.text-sage       { color: var(--sage); }
.text-succulent  { color: var(--succulent); }
.text-driftwood  { color: var(--driftwood); }
.text-forest     { color: var(--forest); }
.text-fern       { color: var(--fern); }
.text-deep-fjord { color: var(--deep-fjord); }

.bg-deep-fjord { background: var(--deep-fjord); }
.bg-fern       { background: var(--fern); }
.bg-frost      { background: var(--frost); }
.bg-driftwood  { background: var(--driftwood); }

/* ── NAVIGATION ── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px var(--space-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(228,232,224,0.92);
  backdrop-filter: blur(12px);
  border-bottom: var(--border-subtle);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}

.nav-wordmark {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--deep-fjord);
  letter-spacing: -0.01em;
  line-height: 1;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-size: 15px;
  color: var(--forest);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--deep-fjord); }

.nav-cta {
  padding: 11px 26px;
  border-radius: var(--radius-sm);
  background: var(--fern);
  color: var(--frost);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.2s;
}

.nav-cta:hover { background: var(--deep-fjord); }

/* ── BUTTONS ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 16px 32px;
  border-radius: var(--radius-sm);
  background: var(--sage);
  color: var(--deep-fjord);
  font-family: var(--font-sans);
  font-size: var(--text-ui);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1.5px solid transparent;
  cursor: pointer;
}

.btn-primary:hover {
  background: transparent;
  border-color: var(--driftwood);
  color: var(--driftwood);
  transform: translateY(-1px);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  color: var(--succulent);
  text-decoration: none;
  transition: color 0.2s;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.btn-secondary:hover { color: var(--frost); }

/* ── SECTION TAG (overline) ── */
.section-tag {
  font-size: var(--text-overline);
  font-weight: 500;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--driftwood);
  margin-bottom: var(--space-md);
  display: block;
}

/* ── YGGDRASIL TEXTURE ── */
.ygg-texture {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.ygg-texture svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 600px;
}

/* ── ANIMATIONS ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up {
  opacity: 0;
  animation: fadeUp 0.9s ease forwards;
}

/* ── FOOTER ── */
.site-footer {
  padding: 48px var(--space-xl);
  background: var(--deep-fjord);
  border-top: var(--border-on-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-logo { display: flex; align-items: center; gap: 14px; }

.footer-wordmark {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--frost);
  letter-spacing: -0.01em;
}

.footer-tagline {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--driftwood);
  margin-top: 3px;
}

.footer-links { display: flex; gap: 24px; }
.footer-links a {
  font-size: 14px;
  color: var(--forest);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: var(--succulent); }

.footer-brand-line {
  font-size: 14px;
  color: var(--forest);
  font-style: italic;
  font-family: var(--font-serif);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  :root {
    --space-xl: 24px;
    --section-padding: 64px 24px;
  }
  .nav-links { display: none; }
  .nav { padding: 16px 24px; }
  .site-footer { flex-direction: column; align-items: flex-start; padding: 40px 24px; }
}