/* ═══════════════════════════════════════════════════════════════
   padelcore — Designtokens
   ───────────────────────────────────────────────────────────────
   DIE EINE WAHRHEIT. Jede Farbe, jede Linienstärke, jedes Maß
   der Marke steht hier — und nur hier. Wer etwas ändern will,
   ändert es in dieser Datei, und es gilt überall:

     · Website  → global.css liest die Tokens in Tailwinds @theme
     · Dokumente → Angebote und Rechnungen lesen sie direkt

   Bewusst framework-frei: reine CSS-Eigenschaften, kein Tailwind,
   kein Build. Eine HTML-Datei kann sie per <link> einbinden und
   im Browser drucken, ohne dass irgendetwas übersetzt werden muss.

   Was hier NICHT steht: Schriftgrößen. Der Bildschirm rechnet in
   rem und skaliert mit der Fensterbreite, das Papier rechnet in
   Punkt und skaliert gar nicht. Geteilt wird die Schriftfamilie
   samt Gewichts- und Breitenachse — die Größenstufen setzt jedes
   Medium für sich.
   ═══════════════════════════════════════════════════════════════ */

:root {

  /* ── Marke ───────────────────────────────────────────────────
     Marineblau stammt aus dem Logo und bleibt. Es markiert die
     Marke, es streicht nicht die halbe Seite an. */
  --pc-brand:    #07295d;
  --pc-core-950: #041530;
  --pc-core-900: #061d43;
  --pc-core-800: #0a2f6b;
  --pc-core-700: #12437f;
  --pc-core-600: #1d5aa0;
  --pc-core-500: #2a72c4;
  --pc-core-400: #6094d5;
  --pc-core-300: #9cb9e2;
  --pc-core-200: #c9d8ee;
  --pc-core-100: #e6edf7;
  --pc-core-50:  #f4f7fc;

  /* ── Signalgelb ──────────────────────────────────────────────
     Auf Weiß hat es 1,4:1 und ist unbrauchbar. Auf dem
     Kohlegrund hat es 13:1. Deshalb lebt es nur dort. */
  --pc-signal:     #f2df23;
  --pc-signal-alt: #22d3ee;

  /* ── Papier und Tusche ───────────────────────────────────────
     Neutral, nicht blaustichig. Kontrastwerte gegen Weiß, damit
     beim Ändern sofort sichtbar ist, was WCAG AA kostet. */
  --pc-ink:   #14171a;   /* 15,9:1 — Fließtext, Überschriften   */
  --pc-mut:   #5c646d;   /*  6,0:1 — Sekundärtext, Beschriftung */
  --pc-line:  #e3e6e9;   /* Haarlinie, nie Text                 */
  --pc-linie: #c8ccd1;   /* kräftigere Linie                    */
  --pc-kohle: #16191c;   /* Nachtfläche                         */
  --pc-bg:    #ffffff;
  --pc-paper: #f6f7f8;   /* Flächenton                          */

  /* ── Handlungen ──────────────────────────────────────────────
     Die Hauptfläche einer Handlung ist Tusche, nicht Signalfarbe.
     Das ist der Griff hochwertiger Bauprodukte: die Handlung
     wirkt durch Entschiedenheit, nicht durch Buntheit. */
  --pc-tat:       var(--pc-ink);
  --pc-tat-ink:   #ffffff;
  --pc-tat-hover: #2b3037;

  /* Akzentschrift: auf hellem Grund Markenblau, auf dunklem Gelb.
     Der Wechsel selbst passiert im jeweiligen Medium. */
  --pc-accent:      var(--pc-signal);
  --pc-accent-ink:  var(--pc-ink);
  --pc-accent-text: var(--pc-brand);

  /* ── Auf dunklem Grund ───────────────────────────────────────
     Die Nachtfläche kehrt die Rollen um: Weiß wird Fläche,
     abgestuftes Weiß wird Schrift und Linie. Die Stufen sind
     Gestaltungsentscheidungen und stehen deshalb hier.
     Hinweis: Rand (.42) und Verweis (.40) liegen dicht
     beieinander — vermutlich Drift, bewusst unverändert
     übernommen. Zusammenlegen wäre eine eigene Entscheidung. */
  --pc-hell:            #ffffff;
  --pc-hell-hover:      rgba(255,255,255,.86);
  --pc-hell-text:       rgba(255,255,255,.72);
  --pc-hell-rand:       rgba(255,255,255,.42);
  --pc-hell-verweis:    rgba(255,255,255,.40);
  --pc-hell-linie:      rgba(255,255,255,.18);

  /* ── Nachtgrund ──────────────────────────────────────────────
     Aus dem Bild "licht-nacht.jpg" gemessen, nicht gewählt: der
     Ton der obersten 2 % und der untersten 2 %. Sie tragen den
     Lichtabschnitt, damit das vollflächige Bild ohne sichtbare
     Kante in den Grund läuft. Wird das Bild getauscht, müssen
     beide Werte neu gemessen werden. */
  --pc-nacht-oben:  #282828;
  --pc-nacht-unten: #393939;

  /* ── Kante ───────────────────────────────────────────────────
     Kein Radius, kein Schatten. 2px ist die Andeutung einer
     Kante, mehr nicht — Karten entstehen daraus ausdrücklich
     nicht. Bilder tragen 0. */
  --pc-kante: 2px;
  --pc-keine: 0; /* @kind radius */

  /* ── Schrift ─────────────────────────────────────────────────
     Eine Familie über zwei Achsen. Die Hierarchie entsteht aus
     Größe, Gewicht und BREITE — nicht aus einem zweiten Schnitt.
     Die Breitenwerte sind Teil der Marke und gehören deshalb
     hierher, nicht in die einzelne Schriftstufe. */
  --pc-font: "Archivo Variable", ui-sans-serif, system-ui, -apple-system, sans-serif;

  --pc-gewicht-text:  400;
  --pc-gewicht-halb:  600; /* @kind font */
  --pc-gewicht-bez:   650; /* @kind font */ /* die gesperrte Versalie */
  --pc-gewicht-fett:  700; /* @kind font */

  --pc-breite-schlag: 96%;   /* Schlagzeile, leicht geschmälert */
  --pc-breite-titel:  98%;
  --pc-breite-normal: 100%;
  --pc-breite-bez:    84%;   /* Beschriftung, deutlich schmal   */

  --pc-sperrung-bez:  .13em;
  --pc-sperrung-tat:  .1em;

  /* ── Rhythmus ────────────────────────────────────────────────
     Drei Dichtestufen statt einer Polsterung. Ein dichter
     Abschnitt verdient einen ruhigen danach. */
  --pc-dicht:  clamp(3rem, 5vw, 4.5rem); /* @kind spacing */
  --pc-normal: clamp(5rem, 8vw, 8rem); /* @kind spacing */
  --pc-weit:   clamp(7rem, 12vw, 12rem); /* @kind spacing */
}

/* ── Umschaltbare Varianten ────────────────────────────────────
   Hängen am <html>, damit sie vor dem ersten Zeichnen greifen. */
:root[data-akzent="warm"]  { --pc-accent: #c2703a; --pc-accent-ink: #ffffff; --pc-accent-text: #a85a28; }
:root[data-flaeche="warm"] { --pc-paper: #f8f6f3; }