/* ============================================================
   tokens.css – Gemeinsame Design-Tokens für pt-weiterbildung.de

   Designsprache: „Praxisraum statt Wartezimmer“
   Warmes Papier als Grund, Navy als Vertrauensanker, Teal als
   Funktionsfarbe, Koralle ausschließlich für die verspielten
   Momente (Sticker, Squiggles, Herz).

   Einbindung: NACH dem Seiten-CSS verlinken – die :root-Werte
   hier überschreiben dann die seitenlokalen Paletten (gleiche
   Spezifität, späterer Eintrag gewinnt). index.css definiert
   als einzige Seite keine eigene Palette mehr.
   ============================================================ */

/* ── Schrift: Fraunces (selbst gehostet, kein Google-CDN) ── */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url('/frontend/assets/fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/frontend/assets/fonts/fraunces-italic-var.woff2') format('woff2');
}

:root {
  /* Grundfarben */
  --bg:            #f9f5ed;   /* warmes Papier */
  --bg-top:        #f3ecdd;   /* etwas tieferer Papierton für Verläufe */
  --surface:       #ffffff;
  --surface-soft:  #f4efe4;

  /* Anker & Text */
  --navy:          #143452;
  --navy-2:        #1a4666;
  --text:          #183b56;
  --text-muted:    #5b6f80;

  /* Funktionsfarbe Teal (Links, aktive Zustände) */
  --teal:          #229a9d;   /* dekorativ */
  --teal-light:    #def0ec;
  --accent:        #16787c;   /* textsicher auf Weiß/Papier */
  --accent-hover:  #0e5f63;
  --accent-light:  #e4f3ef;
  --accent-text:   #116366;

  /* Koralle – nur für die verspielten Momente */
  --coral:         #e8765f;
  --coral-deep:    #c04b33;   /* textsicher */
  --coral-soft:    #fdeee7;

  /* Status */
  --warn:          #b45309;
  --warn-bg:       #fdf6e3;

  /* Linien & Flächen */
  --border:        #ddd3c0;
  --border-strong: #b6a785;

  /* Form */
  --radius:        14px;
  --radius-sm:     9px;
  --shadow:        0 1px 2px rgba(72,50,28,.06), 0 8px 22px rgba(72,50,28,.05);
  --shadow-md:     0 16px 36px rgba(72,50,28,.12), 0 4px 10px rgba(72,50,28,.06);

  /* Schriften */
  --serif:         'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:          'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Warmer Seitengrund für alle Seiten, die tokens.css einbinden */
body {
  background: linear-gradient(180deg, var(--bg-top) 0, var(--bg) 280px);
}

/* Editorial-Headlines: Serif als Stimme des Projekts */
h1, h2 {
  font-family: var(--serif);
  font-weight: 700;
}

::selection {
  background: #f8d8cd;
  color: #5f2415;
}

/* ── Sticker: leicht gedrehte Badges mit Druck-Charme ── */
.pt-sticker {
  display: inline-block;
  transform: rotate(-2deg);
  border: 1.5px solid currentColor;
  border-radius: 8px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 2px 2px 0 rgba(20,52,82,.10);
}
.pt-sticker--coral { color: var(--coral-deep); background: var(--coral-soft); }
.pt-sticker--teal  { color: var(--accent-text); background: var(--teal-light); }
.pt-sticker--navy  { color: var(--navy); background: #e9eff5; }

/* ── Gut-zu-wissen-Box: persönliche Randnotiz ── */
.pt-tip {
  position: relative;
  background: var(--coral-soft);
  border: 1.5px dashed #ecc3ae;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.5;
  color: #6e4536;
}
.pt-tip-label {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--coral-deep);
}

/* ── Signatur: die Menschen hinter dem Projekt ── */
.pt-signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
}
.pt-signature .pt-heart {
  color: var(--coral);
  font-style: normal;
}