/* ServyHub Design-Tokens – generiert aus tokens.json. Theme per data-theme="light|dark" am <html> oder einem Wrapper. */
@import url('./schrift.css');

:root, [data-theme="light"] {
  --surface-page: #f6f7fb;
  --surface-card: #ffffff;
  --surface-raised: #eef0f7;
  --border: #e4e7f0;
  --ink: #12142b;
  --ink-muted: #5b6178;
  --primary: #4f46e5;
  --primary-ink: #4338ca;
  --primary-soft: #eef0ff;
  --accent: #7c3aed;
  --on-primary: #ffffff;
  --brand-hub: #e0382c;
  --danger: #dc2626;
  --star: #f5b301;
  --cat-events: #6a4cf5;
  --cat-events-tint: #f1edff;
  --cat-events-ink: #5233e0;
  --cat-kennenlernen: #e0294f;
  --cat-kennenlernen-tint: #fdeef1;
  --cat-kennenlernen-ink: #c81e45;
  --cat-essen: #d97706;
  --cat-essen-tint: #fff3e6;
  --cat-essen-ink: #b45309;
  --cat-mitfahren: #16a34a;
  --cat-mitfahren-tint: #ebf8ef;
  --cat-mitfahren-ink: #15803d;
  --cat-sport: #2563eb;
  --cat-sport-tint: #ebf2ff;
  --cat-sport-ink: #1d4ed8;
  --cat-nachhilfe: #7c3aed;
  --cat-nachhilfe-tint: #f3edff;
  --cat-nachhilfe-ink: #6d28d9;
  --cat-jobs: #b7791f;
  --cat-jobs-tint: #fff7e0;
  --cat-jobs-ink: #92600a;
  --cat-kleinanzeigen: #0b8a96;
  --cat-kleinanzeigen-tint: #e7f7f9;
  --cat-kleinanzeigen-ink: #0e7480;
  --cat-nachbarschaft: #3f9a3a;
  --cat-nachbarschaft-tint: #eef7e9;
  --cat-nachbarschaft-ink: #2f7d2a;
  --shadow-card: 0 8px 24px rgba(20,24,60,0.06);
  --shadow-pop: 0 18px 40px rgba(79,70,229,0.28);
}

[data-theme="dark"] {
  --surface-page: #0b1226;
  --surface-card: #141c38;
  --surface-raised: #1c2547;
  --border: #263056;
  --ink: #f4f5ff;
  --ink-muted: #a6aecb;
  --primary: #5b55f0;
  --primary-ink: #a5a6ff;
  --primary-soft: #1f2557;
  --accent: #8b5cf6;
  --on-primary: #ffffff;
  --brand-hub: #e0382c;
  --danger: #ef4444;
  --star: #fbbf24;
  --cat-events: #6a4cf5;
  --cat-events-tint: #3b2a8c;
  --cat-events-ink: #ffffff;
  --cat-kennenlernen: #e0294f;
  --cat-kennenlernen-tint: #8f2340;
  --cat-kennenlernen-ink: #ffffff;
  --cat-essen: #d97706;
  --cat-essen-tint: #8a4510;
  --cat-essen-ink: #ffffff;
  --cat-mitfahren: #16a34a;
  --cat-mitfahren-tint: #1d6b3a;
  --cat-mitfahren-ink: #ffffff;
  --cat-sport: #2563eb;
  --cat-sport-tint: #1e4a9e;
  --cat-sport-ink: #ffffff;
  --cat-nachhilfe: #7c3aed;
  --cat-nachhilfe-tint: #4a2a8f;
  --cat-nachhilfe-ink: #ffffff;
  --cat-jobs: #b7791f;
  --cat-jobs-tint: #7a5410;
  --cat-jobs-ink: #ffffff;
  --cat-kleinanzeigen: #0b8a96;
  --cat-kleinanzeigen-tint: #145f6a;
  --cat-kleinanzeigen-ink: #ffffff;
  --cat-nachbarschaft: #3f9a3a;
  --cat-nachbarschaft-tint: #2f6a2b;
  --cat-nachbarschaft-ink: #ffffff;
  --shadow-card: 0 8px 24px rgba(0,0,0,0.35);
  --shadow-pop: 0 18px 40px rgba(91,85,240,0.40);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --surface-page: #0b1226;
    --surface-card: #141c38;
    --surface-raised: #1c2547;
    --border: #263056;
    --ink: #f4f5ff;
    --ink-muted: #a6aecb;
    --primary: #5b55f0;
    --primary-ink: #a5a6ff;
    --primary-soft: #1f2557;
    --accent: #8b5cf6;
    --on-primary: #ffffff;
    --brand-hub: #e0382c;
    --danger: #ef4444;
    --star: #fbbf24;
    --cat-events: #6a4cf5;
    --cat-events-tint: #3b2a8c;
    --cat-events-ink: #ffffff;
    --cat-kennenlernen: #e0294f;
    --cat-kennenlernen-tint: #8f2340;
    --cat-kennenlernen-ink: #ffffff;
    --cat-essen: #d97706;
    --cat-essen-tint: #8a4510;
    --cat-essen-ink: #ffffff;
    --cat-mitfahren: #16a34a;
    --cat-mitfahren-tint: #1d6b3a;
    --cat-mitfahren-ink: #ffffff;
    --cat-sport: #2563eb;
    --cat-sport-tint: #1e4a9e;
    --cat-sport-ink: #ffffff;
    --cat-nachhilfe: #7c3aed;
    --cat-nachhilfe-tint: #4a2a8f;
    --cat-nachhilfe-ink: #ffffff;
    --cat-jobs: #b7791f;
    --cat-jobs-tint: #7a5410;
    --cat-jobs-ink: #ffffff;
    --cat-kleinanzeigen: #0b8a96;
    --cat-kleinanzeigen-tint: #145f6a;
    --cat-kleinanzeigen-ink: #ffffff;
    --cat-nachbarschaft: #3f9a3a;
    --cat-nachbarschaft-tint: #2f6a2b;
    --cat-nachbarschaft-ink: #ffffff;
    --shadow-card: 0 8px 24px rgba(0,0,0,0.35);
    --shadow-pop: 0 18px 40px rgba(91,85,240,0.40);
  }
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

.t-display { font-family: var(--font-sans); font-size: 56px; line-height: 60px; font-weight: 800; letter-spacing: -0.02em; }
.t-h1 { font-family: var(--font-sans); font-size: 40px; line-height: 46px; font-weight: 800; letter-spacing: -0.015em; }
.t-h2 { font-family: var(--font-sans); font-size: 28px; line-height: 34px; font-weight: 700; }
.t-h3 { font-family: var(--font-sans); font-size: 20px; line-height: 26px; font-weight: 700; }
.t-body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 28px; font-weight: 400; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 400; }
.t-small { font-family: var(--font-sans); font-size: 14px; line-height: 20px; font-weight: 500; }
.t-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 600; }