/* =========================================================
   TRVECOLOR · tokens.css
   Design-Tokens. Alles, was man anpassen will, steht hier.
   Reihenfolge der Ebenen für die ganze Seite:
   reset → tokens → base → layout → components → pages → utilities
   Primitive (Rohwerte) → Semantik (Rollen) → Komponenten nutzen nur Semantik.
   ========================================================= */
@layer reset, tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    /* ---------- Primitive ---------- */
    --paper-100: #ecedeb;
    --paper-200: #dfe0de;
    --char-900: #141414;
    --char-800: #1f1f1e;
    --bone-100: #e8e8e4;
    --blood-700: #8b1a1f;
    --blood-400: #e0575d;
    --white: #ffffff;

    /* ---------- Farbe: Rollen ---------- */
    /* Auf Platten- und Bandseiten setzt JS --color-bg/-fg/-accent/-surface
       auf die Cover-Farben (Farbmodus). Alles andere leitet sich davon ab. */
    --color-bg: var(--paper-200);
    --color-fg: var(--char-900);
    --color-accent: var(--blood-700);
    --color-signal: var(--color-accent);   /* Weg einer Person, Tour-Bögen: im Farbmodus rot, solange es sich abhebt (theme.js) */
    --color-surface: var(--paper-100);
    --color-on-accent: var(--white);
    --color-on-disc: var(--white);
    --color-muted: color-mix(in srgb, var(--color-fg) 55%, var(--color-bg));
    --color-line: color-mix(in srgb, var(--color-fg) 16%, var(--color-bg));
    --color-veil: color-mix(in srgb, var(--color-bg) 92%, transparent);

    /* ---------- Schrift ---------- */
    /* --font-sans und die Achsenwerte setzt JS aus site.config.js → font */
    --font-sans: "Archivo", system-ui, "Helvetica Neue", Arial, sans-serif;

    --weight-text: 400;
    --weight-label: 500;
    --weight-black: 900;

    /* Breitenachse (font-stretch). Ohne Breitenachse wirkungslos. */
    --width-text: 100%;
    --width-label: 88%;
    --width-tight: 72%;    /* große Zahlen, Namen in Listen */
    --width-display: 62%;  /* Headlines: eine feste Breite */

    /* Fluide Typo-Skala: 360 px → 1280 px Viewport */
    --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
    --step-0: clamp(1rem, 0.97rem + 0.13vw, 1.08rem);
    --step-1: clamp(1.15rem, 1.1rem + 0.25vw, 1.32rem);
    --step-2: clamp(1.4rem, 1.27rem + 0.55vw, 1.75rem);
    --step-3: clamp(1.8rem, 1.55rem + 1.1vw, 2.6rem);
    --step-4: clamp(2.4rem, 1.9rem + 2.2vw, 4rem);
    --step-5: clamp(3.5rem, 2.4rem + 5vw, 7rem);
    --step-6: clamp(5rem, 2.5rem + 11vw, 12rem);

    --leading-tight: 0.85;
    --leading-snug: 1.2;
    --leading-body: 1.55;

    --tracking-tight: -0.03em;
    --tracking-label: 0.12em;

    /* ---------- Abstand: vier Stufen (die Logik der ganzen Seite) ----------
       section  zwischen Abschnitten einer Seite        (Kopf · Platten · Mitglieder)
       group    zwischen Gruppen in einem Abschnitt      (Überschrift ↔ Inhalt, Text ↔ Aktionen)
       item     zwischen Elementen einer Gruppe          (Absatz ↔ Absatz, Link ↔ Link)
       tight    was zusammengehört                       (Kicker ↔ Headline, Titel ↔ Unterzeile)
       Regel: Je enger zwei Dinge zusammengehören, desto kleiner die Stufe.
       Ein Abstand ist immer deutlich größer als die Stufe darunter (≈ ×2). */
    --gap-section: clamp(4.5rem, 3rem + 6vw, 9rem);
    --gap-group: clamp(2.25rem, 1.75rem + 2vw, 3.75rem);
    --gap-item: clamp(1rem, 0.85rem + 0.6vw, 1.5rem);
    --gap-tight: clamp(0.5rem, 0.45rem + 0.2vw, 0.65rem);
    --gutter: clamp(1.25rem, 0.6rem + 3vw, 3rem);    /* Seitenrand links/rechts */

    /* ---------- Maße ---------- */
    --page-max: 72rem;
    --measure: 36rem;       /* Zeilenlänge Fließtext */
    --disc: 150px;          /* Standardgröße eines Rings im Raster */
    --hairline: 1px;
    --rule: 1px solid var(--color-line);
    --header-h: 4.5rem;
    --tabbar-h: 4.6rem;

    /* ---------- Form ---------- */
    --radius-pill: 999px;
    --radius-round: 50%;
    --shadow-card: 0 0 0 1px var(--color-line), 0 18px 40px -24px rgb(0 0 0 / 0.5);
    --shadow-text: 0 3px 20px rgb(0 0 0 / 0.35);

    /* ---------- Bewegung ---------- */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.2, 1.6, 0.4, 1);
    --dur-fast: 0.15s;
    --dur-med: 0.3s;
    --dur-slow: 0.5s;

    /* ---------- Ebenen ---------- */
    --z-header: 10;
    --z-tabbar: 20;

    /* ---------- Sicherer Bereich (Notch, Home-Balken) ---------- */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    color-scheme: light;
  }

  /* Dunkel: System-Einstellung, außer die Seite erzwingt hell */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --color-bg: var(--char-900);
      --color-fg: var(--bone-100);
      --color-accent: var(--blood-400);
      --color-surface: var(--char-800);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --color-bg: var(--char-900);
    --color-fg: var(--bone-100);
    --color-accent: var(--blood-400);
    --color-surface: var(--char-800);
    color-scheme: dark;
  }

  @media (max-width: 48rem) {
    :root { --disc: 128px; }
  }
}