/* Wesurfin' — Design Tokens (primitive -> semantic -> component) */
:root{
  /* ---- Primitive ---- */
  --sea-900:#0A3A45; --sea-800:#0E4B59; --sea-700:#14606F; --sea-600:#1C7587;
  --teal-500:#2E9C92; --teal-400:#46B3A8; --teal-100:#D7EDEA;
  --terracotta-600:#C4543B; --terracotta-500:#D9674A; --terracotta-300:#E89A7C;
  --gold-500:#C9A24B; --gold-300:#E2C886;
  --sand-300:#E9D9C2; --sand-200:#F2E7D5; --sand-100:#FBF6EE;
  --ink-900:#15201E; --ink-700:#2C3A37; --ink-500:#5A6A64;
  --white:#FFFFFF;

  /* ---- Semantic ---- */
  --color-bg:var(--sand-100);
  --color-surface:var(--white);
  --color-surface-alt:var(--sand-200);
  --color-surface-deep:var(--sand-300);
  --color-text:var(--ink-900);
  --color-text-muted:#3A4A46;
  --color-text-invert:var(--sand-100);
  --color-primary:var(--sea-800);
  --color-primary-deep:var(--sea-900);
  --color-secondary:var(--teal-500);
  --color-accent:var(--terracotta-500);
  --color-accent-hover:var(--terracotta-600);
  --color-gold:var(--gold-500);
  --color-line:rgba(21,32,30,.12);
  --color-header:var(--sea-900);
  --color-footer:var(--sea-900);

  /* ---- Radius / shadow / motion ---- */
  --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.5rem; --radius-2xl:2rem; --radius-pill:999px;
  --shadow-soft:0 10px 30px -12px rgba(10,58,69,.22);
  --shadow-lift:0 22px 48px -18px rgba(10,58,69,.34);
  --shadow-glow:0 14px 30px -10px rgba(217,103,74,.45);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:.18s; --dur:.28s; --dur-slow:.45s;

  /* ---- Component ---- */
  --btn-primary-bg:var(--color-accent);
  --btn-primary-bg-hover:var(--color-accent-hover);
  --btn-primary-fg:var(--white);
  --card-bg:var(--color-surface);
  --card-radius:var(--radius-2xl);
  --kicker:var(--color-gold);
}