/* Stefan Kuper Design System — base reset + component primitives.
   These are hand-written CSS equivalents of the React components in the
   design system bundle (components/forms/Button.jsx, components/content/
   Badge.jsx, components/content/Stoerer.jsx). Sizes, colours, radii and
   motion match the JSX one-for-one. */

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--sk-gray);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; }

a {
  color: var(--sk-red);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-standard);
}
a:hover { color: var(--sk-gray); }

h1, h2, h3 {
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--sk-gray);
}

:focus-visible {
  outline: 2px solid var(--sk-red);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.sk-hand { font-family: var(--font-hand); font-weight: var(--fw-bold); }

/* Visible only to screen readers. */
.sk-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------- button */
.sk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 16px;
  line-height: 1;
  padding: 12px 22px;
  border-radius: var(--radius-md);
  cursor: pointer;
  text-align: center;
  transition: transform var(--dur-fast) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard);
}

.sk-btn--sm { font-size: 14px; padding: 8px 16px;  gap: 6px; }
.sk-btn--lg { font-size: 18px; padding: 15px 28px; gap: 10px; }

.sk-btn--primary {
  background: var(--sk-red);
  color: #fff;
  border: 2px solid var(--sk-red);
}
.sk-btn--secondary {
  background: var(--sk-gray);
  color: #fff;
  border: 2px solid var(--sk-gray);
}
.sk-btn--outline {
  background: transparent;
  color: var(--sk-gray);
  border: 2px solid var(--sk-gray);
}
.sk-btn--ghost {
  background: transparent;
  color: var(--sk-gray);
  border: 2px solid transparent;
}

/* Anchors carrying .sk-btn must not inherit the global link hover colour. */
a.sk-btn:hover { color: inherit; }
.sk-btn:hover  { filter: brightness(0.93); }
.sk-btn:active { transform: scale(0.97); }

.sk-btn--block { display: flex; width: 100%; }

.sk-btn[aria-disabled='true'],
.sk-btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: none;
  transform: none;
}

/* ---------------------------------------------------------------- badge */
.sk-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: var(--sk-red);
  color: #fff;
}
.sk-badge--red      { background: var(--sk-red);      color: #fff; }
.sk-badge--gray     { background: var(--sk-gray);     color: #fff; }
.sk-badge--yellow   { background: var(--sk-yellow);   color: var(--sk-gray); }
.sk-badge--purple   { background: var(--sk-purple);   color: #fff; }
.sk-badge--lavender { background: var(--sk-lavender); color: var(--sk-gray); }
.sk-badge--cream    { background: var(--sk-cream);    color: var(--sk-gray); }
.sk-badge--outline  {
  background: transparent;
  color: var(--sk-gray);
  border: 2px solid var(--sk-gray-300);
}

/* -------------------------------------------------------------- störer */
/* The brand's tilted call-out. Rotated −7° per the manual. Short text uses
   Caveat (hand), longer text uses Montserrat Bold uppercase (.sk-stoerer--type). */
.sk-stoerer {
  display: inline-block;
  font-family: var(--font-hand);
  font-weight: var(--fw-bold);
  font-size: 44px;
  line-height: 0.95;
  padding: 8px 20px;
  border-radius: var(--radius-md);
  transform: rotate(var(--stoerer-tilt));
  letter-spacing: 0;
  background: var(--stoerer-bg);
  color: var(--stoerer-text);
}
.sk-stoerer--sm { font-size: 34px; }
.sk-stoerer--lg { font-size: 56px; }

.sk-stoerer--type {
  font-family: var(--font-sans);
  font-size: 22px;
  line-height: 1.1;
  padding: 10px 18px;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.sk-stoerer--type.sk-stoerer--sm { font-size: 18px; }
.sk-stoerer--type.sk-stoerer--lg { font-size: 30px; }

.sk-stoerer--red    { background: var(--sk-red);    color: #fff; }
.sk-stoerer--yellow { background: var(--sk-yellow); color: var(--sk-gray); }
.sk-stoerer--purple { background: var(--sk-purple); color: #fff; }
.sk-stoerer--gray   { background: var(--sk-gray);   color: #fff; }

/* ----------------------------------------------------------------- card */
/* components/content/Card.jsx: flach, Haarlinien-Rahmen, optionale
   Akzentleiste oben, Schatten nur wenn "elevated". */
.sk-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  font-family: var(--font-sans);
  color: var(--sk-gray);
}
.sk-card--elevated { box-shadow: var(--shadow-md); }

.sk-card--red    { border-top: 4px solid var(--sk-red); }
.sk-card--yellow { border-top: 4px solid var(--sk-yellow); }
.sk-card--purple { border-top: 4px solid var(--sk-purple); }
.sk-card--gray   { border-top: 4px solid var(--sk-gray); }
.sk-card--cream  { border-top: 4px solid var(--sk-cream); }

/* ---------------------------------------------------------------- quote */
/* components/content/Quote.jsx: Caveat, in Guillemets, optional mit Autor. */
.sk-quote {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--sk-gray);
}
.sk-quote > blockquote {
  margin: 0;
  font-family: var(--font-hand);
  font-weight: var(--fw-bold);
  font-size: 40px;
  line-height: 1.05;
}
.sk-quote--type > blockquote {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 1.3;
}
.sk-quote__mark { color: var(--sk-red); }
.sk-quote > figcaption {
  margin-top: 12px;
  font-size: 15px;
  font-weight: var(--fw-semibold);
  color: var(--sk-gray-500);
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}