/* ==========================================================================
   base.css
   Inhalt:
   - Design Tokens (Farben, Typo-Familien, Abstände, Radius)
   - Globale Resets & sinnvolle Element-Defaults (box-sizing, Media, etc.)
   ========================================================================== */

/* ==========================================================================
   Design tokens (CSS custom properties)
   ========================================================================== */

:root {
  /* Colors */
  --color-dark-blue: #3e46d9;
  --color-blue: blue;
  --color-black: #111;
  --color-white: #fff;

  --color-lighter-light-blue: #bfd8e4;
  --color-light-blue: #aecfdf;

  --color-coral: #f27273;
  --color-light-coral: #ffcfd6;
  --lighter-light-coral: #ffe3e7;
  --color-lighter-light-coral: var(--lighter-light-coral);

  --color-dark-red: #371f30;
  --color-light-grey: #ededed;
  --color-border: rgba(0, 0, 0, 0.08);

  /* Typography */
  --font-serif: "Cormorant", serif;
  --font-sans: "Inter", system-ui, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji";
  --line: 1.6;

  /* Spacing scale (use for consistent paddings/margins) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radius */
  --radius-1: 0.25rem;
  --radius-2: 0.5rem;
  --radius-3: 1rem;

  /* Layout helper token */
  --footer-overlap: 0px;
}

/* ==========================================================================
   Base reset
   ========================================================================== */

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

html,
body {
  margin: 0;
  padding: 0;
}

/* Improve text rendering defaults */
html {
  -webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   Base element defaults
   ========================================================================== */

img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Make form controls inherit typography by default (safe base default) */
input,
button,
textarea,
select {
  font: inherit;
}

/* Ensure buttons are clearly interactive by default */
button {
  cursor: pointer;
}