/* Weddinations · Design Tokens · v2.0 · 2026-08-06 */
:root {
  /* Marke */
  --wd-tanne: #23453B;
  --wd-rose: #C4877B;
  --wd-ink: #2B2B2D;

  /* Tanne-Skala */
  --wd-tanne-900: #16302A;
  --wd-tanne-700: #1C3A32;
  --wd-tanne-600: #23453B;
  --wd-tanne-500: #2F5648;
  --wd-tanne-300: #7A9389;
  --wd-tanne-200: #A9BDB4;
  --wd-tanne-100: #E4EBE6;

  /* Rosé-Skala */
  --wd-rose-700: #9E6459;
  --wd-rose-600: #C4877B;
  --wd-rose-400: #D8AAA1;
  --wd-rose-200: #F0E2DD;
  --wd-rose-100: #F7EDEA;

  /* Neutrale */
  --wd-ink-700: #55524E;
  --wd-ink-500: #78746E;
  --wd-ink-300: #A5A09A;
  --wd-line: #E5E0D9;
  --wd-bone: #F3EFE9;
  --wd-paper: #FBFBFB;
  --wd-night: #1E1E20;

  /* Funktional (nur im Tool) */
  --wd-confirmed: #3F6B52;
  --wd-pending: #A8762A;
  --wd-rejected: #94413A;

  /* Semantisch */
  --wd-bg: var(--wd-paper);
  --wd-bg-raised: var(--wd-bone);
  --wd-bg-tint: var(--wd-tanne-100);
  --wd-bg-quote: var(--wd-rose-200);
  --wd-bg-inverse: var(--wd-tanne-600);
  --wd-bg-inverse-deep: var(--wd-tanne-900);
  --wd-text: var(--wd-ink);
  --wd-text-secondary: var(--wd-ink-500);
  --wd-text-brand: var(--wd-tanne-600);
  --wd-text-on-inverse: var(--wd-paper);
  --wd-text-on-inverse-secondary: var(--wd-tanne-200);
  --wd-border: var(--wd-line);
  --wd-border-strong: var(--wd-tanne-600);
  --wd-accent-line: var(--wd-rose-600);
  --wd-accent-on-inverse: var(--wd-rose-400);

  /* Typografie — eine Schrift */
  --wd-font: Jost, Montserrat, Futura, 'Century Gothic', Helvetica, Arial, sans-serif;
  --wd-w-light: 200;
  --wd-w-regular: 300;
  --wd-w-text: 400;
  --wd-w-medium: 500;
  --wd-track-display: -0.02em;
  --wd-track-label: 0.16em;
  --wd-track-wordmark: 0.24em;

  /* Raster */
  --wd-space-1: 4px; --wd-space-2: 8px; --wd-space-3: 12px; --wd-space-4: 16px;
  --wd-space-5: 20px; --wd-space-6: 28px; --wd-space-7: 40px; --wd-space-8: 56px;
  --wd-space-9: 76px; --wd-space-10: 96px;
  --wd-radius: 2px;
}

/* Dunkelmodus: Tanne 900 als Grund, Rosé 400 als Akzent */
[data-theme="dark"] {
  --wd-bg: var(--wd-tanne-900);
  --wd-bg-raised: var(--wd-tanne-700);
  --wd-bg-tint: var(--wd-tanne-700);
  --wd-text: var(--wd-paper);
  --wd-text-secondary: var(--wd-tanne-200);
  --wd-text-brand: var(--wd-paper);
  --wd-border: var(--wd-tanne-500);
  --wd-accent-line: var(--wd-rose-400);
}

body {
  margin: 0;
  background: var(--wd-bg);
  color: var(--wd-text);
  font-family: var(--wd-font);
  font-weight: var(--wd-w-text);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
h1 { font-weight: var(--wd-w-light); font-size: 54px; line-height: 1.05; letter-spacing: var(--wd-track-display); margin: 0; }
h2 { font-weight: var(--wd-w-regular); font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; margin: 0; }
h3 { font-weight: var(--wd-w-medium); font-size: 21px; line-height: 1.3; margin: 0; }
small, .wd-small { font-size: 13px; line-height: 1.6; color: var(--wd-text-secondary); }
.wd-label { font-size: 10px; letter-spacing: var(--wd-track-label); text-transform: uppercase; }
.wd-claim { font-weight: var(--wd-w-regular); font-style: italic; }
.wd-wordmark { font-weight: var(--wd-w-regular); letter-spacing: var(--wd-track-wordmark); text-indent: var(--wd-track-wordmark); }
.wd-rule { width: 72px; height: 2px; background: var(--wd-accent-line); border: 0; margin: 0; }

.wd-btn { display: inline-block; border: 0; border-radius: 0; padding: 15px 30px; font-family: var(--wd-font); font-size: 11px; letter-spacing: var(--wd-track-label); text-transform: uppercase; text-decoration: none; cursor: pointer; }
.wd-btn--primary { background: var(--wd-tanne-600); color: var(--wd-paper); }
.wd-btn--primary:hover { background: var(--wd-tanne-700); }
.wd-btn--accent { background: var(--wd-rose-600); color: var(--wd-paper); }
.wd-btn--accent:hover { background: var(--wd-rose-700); }
.wd-btn--outline { background: transparent; color: var(--wd-tanne-600); box-shadow: inset 0 0 0 1px var(--wd-tanne-600); }
.wd-btn--outline:hover { background: var(--wd-tanne-100); }

.wd-field { display: flex; flex-direction: column; gap: 6px; }
.wd-field > label { font-size: 10px; letter-spacing: var(--wd-track-label); text-transform: uppercase; color: var(--wd-text-secondary); }
.wd-field > input { border: 0; border-bottom: 1px solid var(--wd-border); background: transparent; font-family: var(--wd-font); font-size: 15px; padding: 0 0 8px; color: var(--wd-text); }
.wd-field > input:focus { outline: 0; border-bottom-color: var(--wd-tanne-600); }