:root {
  --void: #0F172A;
  --ink: #1E293B;
  --charcoal: #334155;
  --graphite: #475569;
  --iron: #64748B;
  --stone: #94A3B8;
  --mist: #CBD5E1;
  --cloud: #E2E8F0;
  --silk: #F1F5F9;
  --parchment: #F8FAFC;
  --terra: #6366F1;
  --terra-dark: #4F46E5;
  --terra-soft: #A5B4FC;
  --terra-glow: rgba(99,102,241,0.10);
}

[data-theme="dark"] {
  --void: #E2E8F0;
  --ink: #CBD5E1;
  --charcoal: #94A3B8;
  --graphite: #64748B;
  --iron: #64748B;
  --stone: #475569;
  --mist: #334155;
  --cloud: #1E293B;
  --silk: #1A1F2E;
  --parchment: #0F172A;
  --terra: #818CF8;
  --terra-dark: #6366F1;
  --terra-soft: #C7D2FE;
  --terra-glow: rgba(129,140,248,0.14);
}

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

body {
  font-family: 'Figtree', system-ui, sans-serif;
  background: var(--parchment);
  color: var(--void);
  min-height: 100vh;
  overflow-x: hidden;
}

.view { display: none; min-height: 100vh; }
.view.active { display: block; }


[data-theme="dark"] nav { background: rgba(15,23,42,0.95); }
[data-theme="dark"] footer { background: #020617; color: #64748B; }
[data-theme="dark"] footer .f-name { color: #CBD5E1; }
[data-theme="dark"] footer .f-copy,
[data-theme="dark"] footer .f-copy-right { color: #334155; }

body, nav, footer {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}