/* 02-variables.css — design tokens */
:root{
  --color-azure: #065381;
  --color-azure-2: #08567a;
  --color-azure-soft: rgba(6, 83, 129, 0.72);
  --color-azure-deep: #041c2c;
  --color-slate: #0e2f46;
  --color-teal: #00d1b2;
  --color-gold: #ffd166;
  --color-white: #f7fafc;
  --color-muted: #bfd0db;
  --color-border: rgba(255,255,255,0.12);
  --color-surface: rgba(255,255,255,0.08);
  --color-surface-strong: rgba(255,255,255,0.12);

  --shadow-soft: 0 18px 60px rgba(1, 13, 22, 0.22);
  --shadow-lift: 0 18px 40px rgba(0, 0, 0, 0.18);

  --radius-card: 24px;
  --radius-image: 28px;
  --radius-nav: 20px;
  --radius-pill: 9999px;

  --container: 1280px;
  --gutter: clamp(1rem, 3vw, 2rem);

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-32: 8rem;

  --transition-fast: 180ms ease;
  --transition-base: 300ms ease;
  --transition-slow: 500ms ease;

  --focus-ring: 0 0 0 3px rgba(0, 209, 178, 0.35);
}
html, body{
  background: linear-gradient(180deg, var(--color-azure), var(--color-azure-2));
  color: var(--color-white);
}