/* ============================================================
   Base — Reset, CSS Custom Properties, Typography
   ============================================================ */

/* ---------- Dark theme (default) ---------- */
:root,
[data-theme="dark"] {
  --bg:            #0a0a0c;
  --bg-alt:        #0e0e11;
  --bg-surface:    #131316;
  --bg-elevated:   #1b1b1f;
  --text:          #f0eee9;
  --text-mid:      #c4bfb6;
  --text-muted:    #8a857d;
  --accent:        #4faa73;
  --accent-hover:  #6bc492;
  --accent-dim:    rgba(79,170,115,0.10);
  --border:        rgba(255,255,255,0.07);
  --border-hover:  rgba(255,255,255,0.15);
  --shadow-card:   0 4px 24px rgba(0,0,0,0.3);
  --shadow-glow:   0 0 40px rgba(79,170,115,0.08);
  --nav-bg:        rgba(10,10,12,0.95);
  --photo-filter:  grayscale(20%);
  color-scheme: dark;
}

/* ---------- Light theme ---------- */
[data-theme="light"] {
  --bg:            #f8f7f4;
  --bg-alt:        #f0efeb;
  --bg-surface:    #ffffff;
  --bg-elevated:   #eae9e5;
  --text:          #1a1a1d;
  --text-mid:      #4d4a45;
  --text-muted:    #7a776f;
  --accent:        #2e7d52;
  --accent-hover:  #246843;
  --accent-dim:    rgba(46,125,82,0.08);
  --border:        rgba(0,0,0,0.08);
  --border-hover:  rgba(0,0,0,0.16);
  --shadow-card:   0 4px 24px rgba(0,0,0,0.06);
  --shadow-glow:   0 0 40px rgba(46,125,82,0.10);
  --nav-bg:        rgba(248,247,244,0.95);
  --photo-filter:  grayscale(0%);
  color-scheme: light;
}

/* ---------- Typography tokens ---------- */
:root {
  --font-display:  'Playfair Display', Georgia, serif;
  --font-body:     'Source Sans 3', system-ui, sans-serif;
  --container:     1200px;
  --nav-h:         72px;
  --ease:          cubic-bezier(.25,.1,.25,1);
  --ease-out:      cubic-bezier(0,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior:smooth; overflow-x:clip }
body {
  font-family: var(--font-body);
  font-size: 18px;
  background: var(--bg);
  color: var(--text);
  line-height: 1.7;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  transition: background .4s var(--ease), color .3s var(--ease);
}
img { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer; border:none; background:none; color:inherit }
ul { list-style:none }
::selection { background:var(--accent); color:var(--bg) }

/* ---------- Layout ---------- */
.container { width:100%; max-width:var(--container); margin:0 auto; padding:0 36px }
.scroll-progress { position:fixed; top:0; left:0; width:0; height:2px; background:var(--accent); z-index:1001; transition:background .3s }
.divider hr { border:none; height:1px; background:var(--border); transition:background .3s }

/* ---------- Section helpers ---------- */
.section-label {
  display:block; font-size:15px; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:16px;
  transition: color .3s;
}
.section-header { margin-bottom:56px }
.section-title {
  font-family:var(--font-display); font-size:clamp(2.6rem,5vw,4.2rem);
  font-weight:400; line-height:1.15; color:var(--text);
  transition: color .3s;
}