:root, [data-theme="light"] {
  --color-bg:       #f7f6f2;
  --color-surface:  #f9f8f5;
  --color-surface-offset: #edeae5;
  --color-border:   #d4d1ca;
  --color-text:     #28251d;
  --color-text-muted: #7a7974;
  --color-primary:  #01696f;
  --color-primary-hover: #0c4e54;
  --color-text-inverse: #f9f8f4;
  --shadow-sm: 0 1px 2px rgba(40,37,29,.06);
  --shadow-md: 0 4px 12px rgba(40,37,29,.09);
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --font-body: 'Inter', sans-serif;
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem;
  --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem;
  --space-16: 4rem; --space-20: 5rem;
  --content-default: 960px;
  --transition: 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

[data-theme="dark"] {
  --color-bg:       #171614;
  --color-surface:  #1c1b19;
  --color-surface-offset: #22211f;
  --color-border:   #393836;
  --color-text:     #cdccca;
  --color-text-muted: #797876;
  --color-primary:  #4f98a3;
  --color-primary-hover: #227f8b;
  --color-text-inverse: #171614;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.2);
  --shadow-md: 0 4px 12px rgba(0,0,0,.3);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-16); -webkit-font-smoothing: antialiased; }
body { font-family: var(--font-body); font-size: var(--text-base); color: var(--color-text); background: var(--color-bg); line-height: 1.6; transition: background var(--transition), color var(--transition); }
img { display: block; max-width: 100%; }
a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); }
h1,h2,h3 { line-height: 1.15; text-wrap: balance; }
p { text-wrap: pretty; max-width: 72ch; }

.container { max-width: var(--content-default); margin-inline: auto; padding-inline: var(--space-4); }

/* Header */
.header { position: sticky; top: 0; z-index: 100; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.header__inner { display: flex; align-items: center; gap: var(--space-6); padding-block: var(--space-3); }
.logo { font-weight: 600; font-size: var(--text-lg); color: var(--color-text); }
.nav { display: flex; gap: var(--space-6); margin-left: auto; }
.nav a { font-size: var(--text-sm); color: var(--color-text-muted); }
.nav a:hover { color: var(--color-primary); }
.theme-toggle { background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: var(--space-2); border-radius: var(--radius-md); transition: color var(--transition), background var(--transition); }
.theme-toggle:hover { color: var(--color-text); background: var(--color-surface-offset); }

/* Hero */
.hero { padding-block: clamp(var(--space-16), 10vw, var(--space-20)); text-align: center; }
.hero h1 { font-size: var(--text-2xl); margin-bottom: var(--space-4); }
.hero p { font-size: var(--text-lg); color: var(--color-text-muted); margin-inline: auto; margin-bottom: var(--space-8); }

/* Button */
.btn { display: inline-block; background: var(--color-primary); color: var(--color-text-inverse); padding: var(--space-3) var(--space-8); border-radius: var(--radius-lg); font-size: var(--text-sm); font-weight: 500; transition: background var(--transition); }
.btn:hover { background: var(--color-primary-hover); color: var(--color-text-inverse); }

/* Sections */
.section { padding-block: clamp(var(--space-12), 8vw, var(--space-16)); }
.section--alt { background: var(--color-surface); }
.section h2 { font-size: var(--text-xl); margin-bottom: var(--space-6); }

/* Cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px,100%), 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition); }
.card:hover { box-shadow: var(--shadow-md); }
.card h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.card p { font-size: var(--text-sm); color: var(--color-text-muted); }

/* Footer */
.footer { padding-block: var(--space-8); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); }

/* Mobile */
@media (max-width: 600px) {
  .nav { gap: var(--space-4); }
  .nav a { font-size: 0.8rem; }
}