/* Atlas der Hilfe — Design Tokens.
   Warm-paper-Palette, redaktioneller Charakter. KEIN SaaS-Look. */

:root {
  /* Farben */
  --paper:       #f4ede0;
  --paper-deep:  #ebe1cd;
  --rust:        #b8492a;
  --rust-deep:   #8a3318;
  --olive:       #5a6b3d;
  --teal:        #2d5a5e;
  --ochre:       #c9a35a;
  --ink:         #1c1814;
  --ink-soft:    #4a4138;
  --ink-faint:   #8a7d6c;
  --line:        #d4c8b0;
  --paper-tint:  rgba(184, 73, 42, 0.12);

  /* Typografie */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  --type-xs:   0.75rem;
  --type-sm:   0.875rem;
  --type-md:   1rem;
  --type-lg:   1.125rem;
  --type-xl:   1.5rem;
  --type-2xl:  2rem;
  --type-3xl:  2.75rem;

  --leading-tight: 1.15;
  --leading-body:  1.55;

  /* Abstaende */
  --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;

  /* Radien & Schatten */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --shadow-soft: 0 1px 2px rgba(28, 24, 20, 0.04), 0 8px 24px rgba(28, 24, 20, 0.08);
  --shadow-pop:  0 4px 12px rgba(28, 24, 20, 0.06), 0 24px 48px rgba(28, 24, 20, 0.18);

  /* Animation */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* Touch-Target (Apple HIG) */
  --touch-min: 44px;

  /* Safe-Area iPad */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* Paper grain — sehr dezent, nur auf grossen Flaechen. */
:root {
  --paper-grain: radial-gradient(circle at 20% 30%, rgba(184, 73, 42, 0.025) 0%, transparent 40%),
                 radial-gradient(circle at 80% 70%, rgba(45, 90, 94, 0.025) 0%, transparent 40%);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--type-md);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper) var(--paper-grain);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  margin: 0;
}

button { font: inherit; color: inherit; cursor: pointer; }
em { font-style: italic; color: var(--rust-deep); font-family: var(--font-display); }

/* Reduced motion respektieren */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}