@font-face {
  font-family: "General Sans";
  src: url("fonts/general-sans-400.3ec2be77.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("fonts/general-sans-500.c30377df.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("fonts/general-sans-600.94a2a0e1.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "General Sans";
  src: url("fonts/general-sans-700.a29eab9b.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  
  color-scheme: dark;

  --color-canvas: #1A1613;
  --color-surface: #25201B;
  --color-ink: #F1EBE4;
  --color-ink-muted: #B3A99F;
  --color-primary: #E2BE8A;
  --color-primary-strong: #F0D4AC;
  --color-on-primary: #1A1613;
  --color-line: #8B8179;
  --color-focus: #E2BE8A;
  --color-disabled-bg: #2F2924;
  --color-disabled-ink: #A79D94;

  --font-display-family: 'General Sans', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-display-size: clamp(2.6rem, 2rem + 3vw, 4rem);
  --font-display-weight: 700;
  --font-display-line-height: 1.02;
  --font-display-letter-spacing: -0.032em;
  --font-heading-family: var(--font-display-family);
  --font-heading-size: clamp(2.25rem, 1.8rem + 2.4vw, 3.25rem);
  --font-heading-weight: 600;
  --font-heading-line-height: 1.08;
  --font-heading-letter-spacing: -0.026em;
  --font-body-family: 'General Sans', system-ui, 'Segoe UI', Arial, sans-serif;
  --font-body-size: 1.0625rem;
  --font-body-weight: 400;
  --font-body-line-height: 1.65;
  --font-small-family: var(--font-body-family);
  --font-small-size: 0.875rem;
  --font-small-weight: 500;
  --font-small-line-height: 1.5;
  --font-button-family: var(--font-body-family);
  --font-button-size: 1rem;
  --font-button-weight: 600;
  --font-button-line-height: 1.2;
  --font-button-letter-spacing: 0.005em;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  --shadow-card: 0 1px 1px rgba(107, 74, 36, 0.05), 0 10px 26px -6px rgba(107, 74, 36, 0.10), 0 22px 48px -18px rgba(107, 74, 36, 0.12);
  --shadow-hoch: 0 2px 4px rgba(107, 74, 36, 0.07), 0 18px 40px -10px rgba(107, 74, 36, 0.13), 0 36px 72px -24px rgba(107, 74, 36, 0.16);

  --motion-duration-fast: 160ms;
  --motion-duration-base: 280ms;
  --motion-duration-slow: 560ms;
  --motion-easing-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1);

  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;

  --comp-button-primary-background-color: var(--color-primary);
  --comp-button-primary-text-color: var(--color-on-primary);
  --comp-button-primary-font-family: var(--font-button-family);
  --comp-button-primary-font-size: var(--font-button-size);
  --comp-button-primary-font-weight: var(--font-button-weight);
  --comp-button-primary-line-height: var(--font-button-line-height);
  --comp-button-primary-letter-spacing: var(--font-button-letter-spacing);
  --comp-button-primary-rounded: var(--radius-pill);
  --comp-button-primary-padding: 14px 26px;
  --comp-button-primary-min-height: 48px;
  --comp-button-primary-hover-background-color: var(--color-primary-strong);
  --comp-button-primary-focus-outline-color: var(--color-focus);
  --comp-button-primary-focus-outline-width: 3px;
  --comp-button-primary-focus-outline-offset: 3px;
  --comp-button-primary-active-background-color: var(--color-primary-strong);
  --comp-button-primary-disabled-background-color: var(--color-disabled-bg);
  --comp-button-primary-disabled-text-color: var(--color-disabled-ink);
  --comp-button-sekundaer-background-color: transparent;
  --comp-button-sekundaer-text-color: var(--color-ink);
  --comp-button-sekundaer-border-color: var(--color-line);
  --comp-button-sekundaer-border-width: 1px;
  --comp-button-sekundaer-font-family: var(--font-button-family);
  --comp-button-sekundaer-font-size: var(--font-button-size);
  --comp-button-sekundaer-font-weight: var(--font-button-weight);
  --comp-button-sekundaer-line-height: var(--font-button-line-height);
  --comp-button-sekundaer-letter-spacing: var(--font-button-letter-spacing);
  --comp-button-sekundaer-rounded: var(--radius-pill);
  --comp-button-sekundaer-padding: 13px 25px;
  --comp-button-sekundaer-min-height: 48px;
  --comp-button-sekundaer-hover-border-color: var(--color-primary);
  --comp-button-sekundaer-hover-text-color: var(--color-primary);
  --comp-button-sekundaer-focus-outline-color: var(--color-focus);
  --comp-button-sekundaer-focus-outline-width: 3px;
  --comp-button-sekundaer-focus-outline-offset: 3px;
  --comp-button-sekundaer-active-border-color: var(--color-primary-strong);
  --comp-button-sekundaer-active-text-color: var(--color-primary-strong);
  --comp-button-sekundaer-disabled-background-color: var(--color-disabled-bg);
  --comp-button-sekundaer-disabled-text-color: var(--color-disabled-ink);
  --comp-button-sekundaer-disabled-border-color: var(--color-disabled-bg);
  --comp-link-background-color: transparent;
  --comp-link-text-color: var(--color-primary);
  --comp-link-hover-text-color: var(--color-primary-strong);
  --comp-link-focus-outline-color: var(--color-focus);
  --comp-link-focus-outline-width: 2px;
  --comp-link-focus-outline-offset: 2px;
  --comp-link-active-text-color: var(--color-primary-strong);
  --comp-nav-link-background-color: transparent;
  --comp-nav-link-text-color: var(--color-ink);
  --comp-nav-link-font-family: var(--font-small-family);
  --comp-nav-link-font-size: var(--font-small-size);
  --comp-nav-link-font-weight: var(--font-small-weight);
  --comp-nav-link-line-height: var(--font-small-line-height);
  --comp-nav-link-rounded: var(--radius-pill);
  --comp-nav-link-padding: 10px 14px;
  --comp-nav-link-min-height: 44px;
  --comp-nav-link-hover-text-color: var(--color-primary);
  --comp-nav-link-focus-outline-color: var(--color-focus);
  --comp-nav-link-focus-outline-width: 2px;
  --comp-nav-link-focus-outline-offset: 2px;
  --comp-nav-link-active-text-color: var(--color-primary-strong);
  --comp-input-background-color: var(--color-surface);
  --comp-input-text-color: var(--color-ink);
  --comp-input-placeholder-color: var(--color-ink-muted);
  --comp-input-border-color: var(--color-line);
  --comp-input-border-width: 1px;
  --comp-input-rounded: var(--radius-sm);
  --comp-input-padding: 12px 14px;
  --comp-input-min-height: 48px;
  --comp-input-hover-border-color: var(--color-ink-muted);
  --comp-input-focus-border-color: var(--color-focus);
  --comp-input-focus-outline-color: var(--color-focus);
  --comp-input-focus-outline-width: 2px;
  --comp-input-focus-outline-offset: 1px;
  --comp-input-active-border-color: var(--color-focus);
  --comp-input-disabled-background-color: var(--color-disabled-bg);
  --comp-input-disabled-text-color: var(--color-disabled-ink);
  --comp-input-disabled-border-color: var(--color-disabled-bg);
  --comp-card-background-color: var(--color-surface);
  --comp-card-text-color: var(--color-ink);
  --comp-card-rounded: var(--radius-lg);
  --comp-card-padding: 28px;
  --comp-card-shadow: var(--shadow-card);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-duration-fast: 120ms;
    --motion-duration-base: 120ms;
    --motion-duration-slow: 120ms;
  }
}