/* julok.media – Design-Tokens
 * Farben und Radius/Maxwidth 1:1 aus dem Entwurf „Julok Homepage-Konzept".
 * Ergänzt: Typo-Skala, Spacing, Motion, Fokus.
 */

:root {
  /* ---- Farben: unverändert aus dem Entwurf ---- */
  --bg:            #0c0c0d;
  --bg-raise:      #131315;
  --surface:       #18181b;
  --line:          #2b2c2f;

  --text:          #f3f0e8;
  --text-dim:      #a6a49c;
  --text-faint:    #7d7c76;   /* Korrektur ggue. Entwurf: #6f6e69 (~4.1:1) auf #7d7c76 (~4.66:1) angehoben, WCAG AA erfuellt */

  --accent:        #f0c030;
  --accent-dim:    #7a611c;
  --accent-ink:    #1a1502;

  --tag-musik:     #c9553d;
  --tag-mode:      #4c7a8c;
  --tag-health:    #6f9169;
  --tag-events:    #9a6bb0;

  /* ---- Layout ---- */
  --radius:        2px;
  --maxw:          1180px;
  --gutter:        clamp(1rem, 4vw, 2.5rem);

  /* ---- Schrift: selbst gehostet, reduzierte Schnitte ---- */
  --font-display:  "Big Shoulders Display", "Arial Narrow", sans-serif;
  --font-body:     "IBM Plex Sans", system-ui, sans-serif;
  --font-mono:     "IBM Plex Mono", ui-monospace, monospace;

  /* ---- Typo-Skala, fluid ---- */
  --fs-hero:       clamp(2rem, 7.5vw, 5.5rem);   /* Korrektur: alter Floor (2.75rem/44px) blieb auf allen Breiten unter ~550px konstant hoch und liess die Headline auf Schmalgeraeten zu gross wirken */
  --fs-h2:         clamp(1.75rem, 4vw, 2.75rem);
  --fs-h3:         clamp(1.0625rem, 1.6vw, 1.25rem);
  --fs-body:       clamp(0.9375rem, 1.1vw, 1.0625rem);
  --fs-small:      0.875rem;
  --fs-mono:       0.75rem;

  --lh-display:    0.92;
  --lh-heading:    1.1;
  --lh-body:       1.6;

  --ls-display:    -0.01em;
  --ls-mono:       0.08em;   /* Timecodes, Labels, Eyebrows */

  /* ---- Spacing ---- */
  --space-2xs:     0.25rem;
  --space-xs:      0.5rem;
  --space-sm:      0.75rem;
  --space-md:      1.25rem;
  --space-lg:      2rem;
  --space-xl:      3.5rem;
  --space-2xl:     clamp(4rem, 10vw, 7.5rem);

  /* ---- Motion ---- */
  --dur-fast:      120ms;
  --dur-base:      220ms;
  --ease:          cubic-bezier(0.2, 0, 0.2, 1);

  /* ---- Fokus ---- */
  --focus-ring:    2px solid var(--accent);
  --focus-offset:  2px;
}

/* Segmentfarbe als eine Variable pro Karte setzen,
   statt vier Klassen mit je eigener Farbregel. */
[data-segment="musik"]  { --seg: var(--tag-musik); }
[data-segment="mode"]   { --seg: var(--tag-mode); }
[data-segment="health"] { --seg: var(--tag-health); }
[data-segment="events"] { --seg: var(--tag-events); }

/* Poster-Platzhalter, solange keine Bilder vorliegen.
   Ersetzt die vier .thumb-* Klassen des Entwurfs. */
.thumb-placeholder {
  background:
    linear-gradient(140deg,
      color-mix(in oklab, var(--seg) 32%, var(--bg)) 0%,
      var(--bg-raise) 72%);
}

*:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

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