/*
 * Kulturstelle – Design-Tokens (Entwurf v0.1, 3. Oktober 2026)
 *
 * Farben, Schrift, Abstände. Gleicher Inhalt wie docs/design/tokens.css (Design-Guide):
 * Änderungen bitte in beiden Dateien nachführen.
 *
 * Farben sind aus den Instagram-Screenshots gemessen – mit Canva abgleichen.
 */

:root {
  /* ---------- Bühnenfarben: vollflächige Hintergründe ---------- */
  --ks-orchid: #CB6CE4;   /* Orchidee – "Sommernachtstraum" */
  --ks-blue:   #3B62ED;   /* Elektroblau – "Meerjungfrau", "Wolfgang Bauer" */
  --ks-dusk:   #585C93;   /* Dämmerung – "Symphonic Portrait of Love" */
  --ks-lilac:  #E2ADF1;   /* Flieder – Logo-Hintergrund */

  /* ---------- Tiefen: Duotone-Schatten, Flächen mit weisser Schrift ---------- */
  --ks-berry:  #A22270;   /* Beere */
  --ks-violet: #7929C9;   /* Ultraviolett */
  --ks-ink:    #14101C;   /* Tinte – Text auf hellem Grund */

  /* ---------- Akzente: NUR in Verläufen / Blobs, nie als Textfarbe ---------- */
  --ks-mint:   #4ED796;
  --ks-cyan:   #44B4BB;
  --ks-sky:    #55BDE4;
  --ks-red:    #BF2540;
  --ks-sun:    #E9C84A;   /* geschätzt, im Screenshot nur als Verlaufsrest sichtbar */

  /* ---------- Neutrale ---------- */
  --ks-white:   #FFFFFF;
  --ks-paper:   #F7F2F8;  /* leicht lila getöntes Weiss */
  --ks-paper-2: #EEE5F1;  /* Flächen auf Papier */
  --ks-muted:   #5E566B;  /* Sekundärtext auf Papier, 6.3:1 */
  --ks-line:    rgba(20, 16, 28, .14);

  --ks-lilac-gradient: linear-gradient(160deg, #CE81E4 0%, #E9C2F5 100%);

  /* ---------- Duotone-Paare (Schatten -> Licht) ---------- */
  --duo-berry-dark:   #8E1858;  --duo-berry-light:  #C6DAE6;
  --duo-violet-dark:  #2A1F45;  --duo-violet-light: #C99BE0;
  --duo-dusk-dark:    #353766;  --duo-dusk-light:   #ABA8CC;

  /* ---------- Schrift ---------- */
  /* Schriften des Brandings: Afronaut für Titel (Weblizenz noch offen, bis dahin greift Louis George Cafe),
     Louis George Cafe für Text, Datum und Ort */
  --font-display: "Afronaut", "Louis George Cafe", system-ui, sans-serif;
  --font-text:    "Louis George Cafe", system-ui, sans-serif;

  --fs-display-xl: clamp(3rem, 1.6rem + 6.2vw, 7.5rem);
  --fs-display-l:  clamp(2.5rem, 1.7rem + 3.6vw, 4.5rem);
  --fs-display-m:  clamp(1.75rem, 1.35rem + 1.7vw, 2.5rem);
  --fs-display-s:  clamp(1.375rem, 1.2rem + .8vw, 1.75rem);
  --fs-meta:       clamp(1.125rem, 1rem + .55vw, 1.5rem);
  --fs-body:       1.125rem;
  --fs-small:      .875rem;

  --fw-display: 400;   /* Titel nie fett */
  --fw-meta:    300;   /* Datum, Ort – wie auf den Posters (Louis George Cafe Light) */
  --fw-body:    400;
  --fw-strong:  700;

  --lh-display: 1.02;
  --lh-body:    1.6;
  --tracking-display: -0.015em;
  /* Mittlere Zeichenbreite der Titelschrift (em): lange Eventnamen werden so verkleinert,
     dass kein Wort umbricht. Louis George Cafe: .6, Afronaut: ca. .7 */
  --display-char: .6;

  /* ---------- Abstände & Raster ---------- */
  --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;  --space-10: 128px;

  --gutter:      clamp(16px, 4vw, 48px);
  --content-max: 1200px;
  --text-max:    68ch;

  --radius-0:    0;      /* Plakate, Bilder, Karten */
  --radius-m:    14px;   /* Eingabefelder, Hinweisboxen */
  --radius-pill: 999px;  /* Buttons, Tags */

  /* ---------- Bewegung ---------- */
  --ease:     cubic-bezier(.2, .7, .2, 1);
  --dur-fast: 150ms;
  --dur:      300ms;
  --dur-blob: 28s;
}

/* ---------- Bühnen: setzen Hintergrund, Textfarbe, Blobs und Duotone (für Freisteller) ---------- */
.stage-orchid {
  --stage: var(--ks-orchid);
  --on-stage: var(--ks-white);        /* nur grosse Schrift >= 24px (3.1:1) */
  --on-stage-small: var(--ks-ink);    /* kleine Schrift in Tinte */
  --blob-1: var(--ks-mint); --blob-2: var(--ks-sky); --blob-3: var(--ks-blue);
  --duo: url(#duo-berry);
}
.stage-blue {
  --stage: var(--ks-blue);
  --on-stage: var(--ks-white);        /* 5.1:1 */
  --on-stage-small: var(--ks-white);
  --blob-1: var(--ks-mint); --blob-2: var(--ks-berry); --blob-3: var(--ks-violet);
  --duo: url(#duo-berry);
}
.stage-dusk {
  --stage: var(--ks-dusk);
  --on-stage: var(--ks-white);        /* 6.2:1 */
  --on-stage-small: var(--ks-white);
  --blob-1: var(--ks-violet); --blob-2: var(--ks-lilac); --blob-3: var(--ks-sky);
  --duo: url(#duo-violet);
}
.stage-lilac {
  --stage: var(--ks-lilac);
  --on-stage: var(--ks-ink);          /* weiss verboten (1.8:1) */
  --on-stage-small: var(--ks-ink);
  --blob-1: var(--ks-orchid); --blob-2: var(--ks-sky); --blob-3: var(--ks-white);
  --duo: url(#duo-violet);
}