:root {
  --font: "Inter", system-ui, -apple-system, sans-serif;
  --radius: 14px;
  --radius-lg: 22px;
  --header-h: 72px;
  --space-section: 4.5rem;
  --space-container-inline: clamp(1.25rem, 4vw, 2.5rem);
  --transition: 0.22s ease;
  --transition-nav: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-card-lg: 0 20px 50px rgba(0, 0, 0, 0.12);
  --shadow-hero: 0 24px 60px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0f0d;
  --bg-elevated: #111916;
  --bg-card: #141c18;
  --border: rgba(61, 168, 122, 0.22);
  --green: #3da87a;
  --green-soft: #2d8f66;
  --green-muted: rgba(61, 168, 122, 0.14);
  --green-glow: rgba(61, 168, 122, 0.38);
  --green-line-end: rgba(61, 168, 122, 0.12);
  --text: #e9f1ec;
  --text-muted: #94ada0;
  --header-bg: rgba(11, 15, 13, 0.86);
  --nav-mobile-bg: rgba(14, 20, 17, 0.97);
  --nav-backdrop: rgba(0, 0, 0, 0.45);
  --modal-backdrop: rgba(0, 0, 0, 0.65);
  --btn-primary-fg: #041208;
  --hero-inset: rgba(255, 255, 255, 0.04);
  --about-work-bg: rgba(61, 168, 122, 0.08);
  --shadow-card: 0 4px 28px rgba(0, 0, 0, 0.35);
  --shadow-card-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-hero: 0 24px 60px rgba(0, 0, 0, 0.45);
  --project-hover-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
  --scrollbar-track: #060908;
  --scrollbar-thumb: #3da87a;
  --scrollbar-thumb-hover: color-mix(in srgb, var(--scrollbar-thumb) 82%, #ffffff);
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f0f5f2;
  --bg-elevated: #e4ece7;
  --bg-card: #ffffff;
  --border: rgba(45, 143, 102, 0.22);
  --green: #2a8a62;
  --green-soft: #237a56;
  --green-muted: rgba(42, 138, 98, 0.14);
  --green-glow: rgba(42, 138, 98, 0.28);
  --green-line-end: rgba(42, 138, 98, 0.18);
  --text: #0f1814;
  --text-muted: #4a6358;
  --header-bg: rgba(255, 255, 255, 0.9);
  --nav-mobile-bg: rgba(255, 255, 255, 0.98);
  --nav-backdrop: rgba(15, 24, 20, 0.35);
  --modal-backdrop: rgba(15, 24, 20, 0.45);
  --btn-primary-fg: #ffffff;
  --hero-inset: rgba(0, 0, 0, 0.04);
  --about-work-bg: rgba(42, 138, 98, 0.08);
  --shadow-card: 0 4px 20px rgba(15, 24, 20, 0.08);
  --shadow-card-lg: 0 20px 48px rgba(15, 24, 20, 0.1);
  --shadow-hero: 0 20px 48px rgba(15, 24, 20, 0.12);
  --project-hover-shadow: 0 16px 36px rgba(15, 24, 20, 0.12);
  --scrollbar-track: #dce5df;
  --scrollbar-thumb: #2a8a62;
  --scrollbar-thumb-hover: color-mix(in srgb, var(--scrollbar-thumb) 78%, #ffffff);
}