/* ============================================
    base.css
    Fonts · Variables · Reset · Body
   ============================================ */

/* ── OFFLINE FONTS ───────────────────────────── */
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-SemiBold.ttf') format('truetype');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Syne';
  src: url('fonts/Syne-ExtraBold.ttf') format('truetype');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Medium.ttf') format('truetype');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ── CSS VARIABLES ───────────────────────────── */
:root {
  --bg:          #f7f8fa;
  --bg-alt:      #ffffff;
  --card-bg:     #ffffff;
  --nav-bg:      rgba(255, 255, 255, 0.9);
  --footer-bg:   #ffffff;
  --hover-bg:    rgba(15, 23, 32, 0.05);
  --accent:      #00814F;
  --accent-dim:  rgba(0, 129, 79, 0.10);
  --accent-glow: rgba(0, 129, 79, 0.25);
  --text:        #14181b;
  --muted:       #5b6570;
  --border:      rgba(15, 23, 32, 0.09);
  --radius:      14px;
  --transition:  0.25s ease;
  --shadow-sm:   0 4px 16px rgba(20, 24, 27, 0.06);
  --shadow-md:   0 12px 32px rgba(20, 24, 27, 0.08);
  --body-glow-1: rgba(0, 129, 79, 0.06);
  --body-glow-2: rgba(0, 80, 160, 0.05);
  --noise-opacity: 0.015;
    --hero-glow:     rgba(0, 129, 79, 0.12);
  --photo-glow:    rgba(0, 129, 79, 0.22);
  --photo-ring:    0 0 0 8px rgba(0,129,79,0.08), 0 8px 40px rgba(20,24,27,0.12);
  --photo-ring-hover: 0 0 0 8px rgba(0, 129, 79, 0.1), 0 8px 48px rgba(0, 129, 79, 0.35);
}

[data-theme="dark"] {
  --bg:          #0a0a0a;
  --bg-alt:      #111111;
  --card-bg:     #151515;
  --nav-bg:      rgba(20, 20, 20, 0.92);
  --footer-bg:   #080808;
  --hover-bg:    rgba(255, 255, 255, 0.06);
  --accent:      #00945A;
  --accent-dim:  rgba(0, 148, 90, 0.15);
  --accent-glow: rgba(0, 148, 90, 0.35);
  --text:        #f0f0f0;
  --muted:       #929aa3;
  --border:      rgba(255, 255, 255, 0.08);
  --shadow-sm:   0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 12px 32px rgba(0, 0, 0, 0.5);
  --body-glow-1: rgba(0, 50, 120, 0.10);
  --body-glow-2: rgba(0, 148, 90, 0.12);
  --noise-opacity: 0.03;
  --hero-glow:     rgba(0, 148, 90, 0.18);
  --photo-glow:    rgba(0, 148, 90, 0.32);
  --photo-ring:    0 0 0 8px rgba(0,148,90,0.12), 0 0 50px rgba(0,148,90,0.25);
  --photo-ring-hover: 0 0 0 8px rgba(0, 148, 90, 0.15), 0 0 70px rgba(0, 148, 90, 0.5);
}

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

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  background: radial-gradient(ellipse at top left,    var(--body-glow-1) 0%, transparent 50%),
  radial-gradient(ellipse at bottom right, var(--body-glow-2) 0%, transparent 55%), var(--bg);
  color: var(--text);
  font-family: 'DM Sans', sans-serif;
  line-height: 1.7;
  overflow-x: hidden;
  max-height: 250%; 
  max-width: 200%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: var(--noise-opacity);
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

/* Accent utility class */
.accent { color: var(--accent); }