/* =============================================================
   wirdigital.at — Design System Foundation (Production)
   Abgeleitet aus colors_and_type.css (Designsystem-Ordner)
   Font-Pfade relativ zu src/styles/ → ../fonts/
   ============================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Variable.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/SourceSerif4-Italic-Variable.ttf") format("truetype-variations");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../fonts/AtkinsonHyperlegible-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Markenpalette */
  --violett:        #5436a6;
  --burgundy:       #962d4a;
  --dunkelgrau:     #343434;
  --fast-weiss:     #fdfdfd;

  /* Ergänzende Flächen */
  --lavendel:       #f0edf7;
  --rose:           #f7f0f2;
  --teal:           #0f6e63;

  /* Neutrals */
  --grau-100:       #f4f4f5;
  --grau-200:       #e5e4e9;
  --grau-300:       #c9c6d1;
  --grau-500:       #6f6b78;
  --grau-700:       #3f3b48;

  /* Semantische Farb-Tokens */
  --bg:             var(--fast-weiss);
  --bg-info:        var(--lavendel);
  --bg-accent:      var(--rose);
  --bg-success:     #e6f1ef;

  --fg:             var(--dunkelgrau);
  --fg-muted:       var(--grau-500);
  --fg-on-brand:    var(--fast-weiss);
  --fg-on-info:     var(--violett);
  --fg-on-accent:   var(--burgundy);

  --brand:          var(--violett);
  --brand-hover:    #452c89;
  --brand-press:    #3a2574;
  --accent:         var(--burgundy);
  --accent-hover:   #7f2640;
  --success:        var(--teal);
  --success-hover:  #0c5c53;

  --link:           var(--burgundy);
  --link-hover:     var(--brand);

  --border:         #e1dde9;
  --border-strong:  #c9c6d1;
  --focus-ring:     #a78df0;

  /* Typografie */
  --font-serif:     "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans:      "Atkinson Hyperlegible", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:      var(--font-sans);
  --font-heading:   var(--font-serif);

  /* Schriftgrößen */
  --fs-display:   clamp(2.25rem, 1.8rem + 2vw, 3rem);
  --fs-h1:        clamp(1.75rem, 1.5rem + 1.2vw, 2.25rem);
  --fs-h2:        clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);
  --fs-h3:        1.125rem;
  --fs-body:      1rem;
  --fs-small:     0.875rem;
  --fs-caption:   0.75rem;

  --lh-tight:     1.2;
  --lh-heading:   1.3;
  --lh-body:      1.6;

  --fw-regular:   400;
  --fw-semibold:  600;
  --fw-bold:      700;

  --measure:      68ch;

  /* Abstände */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* Radien */
  --radius-sm:    6px;
  --radius-md:    10px;
  --radius-lg:    16px;
  --radius-xl:    24px;
  --radius-pill:  999px;

  /* Schatten */
  --shadow-xs:  0 1px 2px rgba(52,52,52,.06);
  --shadow-sm:  0 2px 6px rgba(52,52,52,.06), 0 1px 2px rgba(52,52,52,.04);
  --shadow-md:  0 8px 20px rgba(84,54,166,.08), 0 2px 6px rgba(52,52,52,.05);
  --shadow-lg:  0 24px 48px rgba(84,54,166,.12), 0 8px 16px rgba(52,52,52,.06);

  /* Motion */
  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --ease-soft:     cubic-bezier(0.4, 0.0, 0.2, 1);
  --dur-fast:   120ms;
  --dur-base:   200ms;
  --dur-slow:   320ms;

  /* Layout */
  --container:        1120px;
  --container-narrow: 760px;
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  background: var(--bg);
  color: var(--fg);
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--brand);
  line-height: var(--lh-heading);
  font-weight: var(--fw-semibold);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

.display {
  font-family: var(--font-heading);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  color: var(--brand);
  font-weight: var(--fw-semibold);
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0 0 var(--space-5);
}

p {
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  text-wrap: pretty;
}

.lead {
  font-size: 1.125rem;
  color: var(--fg);
}

a {
  color: var(--link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--dur-fast) var(--ease-standard);
}
a:hover { color: var(--link-hover); }
a:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

strong { font-weight: var(--fw-bold); }

::selection { background: var(--lavendel); color: var(--brand); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition:
    background var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 3px;
}
.btn:active { transform: translateY(1px); }
.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: var(--brand);
  color: var(--fg-on-brand);
  border-color: var(--brand);
}
.btn-primary:hover {
  background: var(--brand-hover);
  border-color: var(--brand-hover);
  color: var(--fg-on-brand);
}
.btn-primary:active { background: var(--brand-press); border-color: var(--brand-press); }

.btn-accent {
  background: var(--accent);
  color: var(--fg-on-brand);
  border-color: var(--accent);
}
.btn-accent:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--fg-on-brand);
}

.btn-secondary {
  background: transparent;
  color: var(--brand);
  border-color: var(--brand);
}
.btn-secondary:hover {
  background: var(--brand);
  color: var(--fg-on-brand);
}

.btn-success {
  background: var(--success);
  color: var(--fg-on-brand);
  border-color: var(--success);
}
.btn-success:hover { background: var(--success-hover); border-color: var(--success-hover); color: var(--fg-on-brand); }

.btn-sm { padding: var(--space-2) var(--space-4); font-size: var(--fs-small); }
.btn-lg { padding: var(--space-4) var(--space-7); font-size: 1.125rem; }
.btn-block { width: 100%; }