/* ============================================================
   DESIGN-ACHSEN
   Reine Token-Bloecke, kein Layout — damit der Vergleich im Termin
   ehrlich ist und sich immer nur eine Sache aendert.

   Bedient werden sie vom Studio-Panel (assets/studio.js).
   Achsen:  data-type      Schrift
            data-palette   Grundton
            data-accent    Akzentfarbe
   ============================================================ */


/* ------------------------------------------------------------
   ACHSE 1 — SCHRIFT

   --condensed macht in site.css Doppeldienst: Riesen-Headlines UND
   winzige Uppercase-Labels (34 Stellen). In der Display-Rolle stehen
   deshalb nur Schriften, die beide Groessen tragen. Die Body-Serife
   variiert frei, sie sitzt nur im Fliesstext.
   ------------------------------------------------------------ */

/* 02 GOTHIC — die Sprache aus prototype/v3 */
:root[data-type="gothic"] {
  --condensed: "League Gothic", "Antonio", "Arial Narrow", sans-serif;
  --serif: "Alegreya", Georgia, serif;
  --serif-display: "Alegreya", Georgia, serif;
}
:root[data-type="gothic"] .kicker,
:root[data-type="gothic"] .page-head .crumb,
:root[data-type="gothic"] .footer-meta .col .h,
:root[data-type="gothic"] .pagenav .label,
:root[data-type="gothic"] .rule-list-title {
  letter-spacing: 0.18em; /* League Gothic ist enger, braucht mehr Luft */
}
:root[data-type="gothic"] .serif-accent,
:root[data-type="gothic"] .manifesto-quote,
:root[data-type="gothic"] .pull { font-style: italic; }

/* 03 BODONI — Modemagazin, hoher Strichkontrast */
:root[data-type="bodoni"] {
  --condensed: "Archivo Narrow", "Arial Narrow", sans-serif;
  --serif: "Bodoni Moda", Georgia, serif;
  --serif-display: "Bodoni Moda", Georgia, serif;
}
:root[data-type="bodoni"] body { font-size: calc(var(--text-base) * 1.02); }
:root[data-type="bodoni"] .hero-mark .name,
:root[data-type="bodoni"] .poster .l { letter-spacing: 0.01em; }

/* 04 FRAUNCES — waermer, zeitgenoessisch */
:root[data-type="fraunces"] {
  --condensed: "Barlow Condensed", "Arial Narrow", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --serif-display: "Fraunces", Georgia, serif;
  --fraunces-soft: "opsz" 40, "SOFT" 40, "WONK" 1;
}
:root[data-type="fraunces"] .manifesto-quote,
:root[data-type="fraunces"] .pull,
:root[data-type="fraunces"] .footer-big { font-variation-settings: var(--fraunces-soft); }
:root[data-type="fraunces"] .kicker,
:root[data-type="fraunces"] .page-head .crumb,
:root[data-type="fraunces"] .footer-meta .col .h { font-weight: 500; letter-spacing: 0.16em; }

/* 05 OSWALD — nuechtern, redaktionell, Schweizer Plakat */
:root[data-type="oswald"] {
  --condensed: "Oswald", "Arial Narrow", sans-serif;
  --serif: "Lora", Georgia, serif;
  --serif-display: "Lora", Georgia, serif;
}
:root[data-type="oswald"] .kicker,
:root[data-type="oswald"] .page-head .crumb,
:root[data-type="oswald"] .footer-meta .col .h,
:root[data-type="oswald"] .pagenav .label,
:root[data-type="oswald"] .rule-list-title {
  font-weight: 500;
  letter-spacing: 0.16em;
}

/* 06 CORMORANT — edle Serifen-Versalien, Ballett-Programmheft.
   Einzige Nicht-Condensed in der Display-Rolle: traegt die Riesen-
   Headlines als Fashion-Serif, die Mini-Labels brauchen Gewicht. */
:root[data-type="cormorant"] {
  --condensed: "Cormorant Garamond", Georgia, serif;
  --serif: "Alegreya", Georgia, serif;
  --serif-display: "Cormorant Garamond", Georgia, serif;
}
:root[data-type="cormorant"] .kicker,
:root[data-type="cormorant"] .page-head .crumb,
:root[data-type="cormorant"] .footer-meta .col .h,
:root[data-type="cormorant"] .pagenav .label,
:root[data-type="cormorant"] .rule-list-title {
  font-weight: 700;
  letter-spacing: 0.2em;
}
:root[data-type="cormorant"] .serif-accent,
:root[data-type="cormorant"] .manifesto-quote,
:root[data-type="cormorant"] .pull { font-style: italic; }


/* ------------------------------------------------------------
   ACHSE 2 — GRUNDTON
   Werte aus COLOR_RESEARCH.md, dort auf Kontrast geprueft.
   --line und --line-light leiten sich in site.css per color-mix aus
   --ink/--cream ab und rechnen sich damit automatisch mit.
   ------------------------------------------------------------ */

/* 02 NEWSPRINT & INK — Direction A, in der Recherche empfohlen */
:root[data-palette="newsprint"] {
  --ink:         oklch(19.0% 0.012 255);
  --ink-soft:    oklch(42.0% 0.014 255);
  --paper:       oklch(93.0% 0.007 250);
  --cream:       oklch(97.2% 0.004 250);
  --blush:       oklch(85.5% 0.070 28);
  --blush-paper: oklch(94.5% 0.024 28);
  --tape:        oklch(88.0% 0.030 250 / 0.75);
}

/* 03 COLD PAPER — Direction D, konservativ.
   Im Editor nicht mehr angeboten (Zwilling von Newsprint), der Block
   bleibt, damit alte gespeicherte Staende weiter funktionieren. */
:root[data-palette="coldpaper"] {
  --ink:         oklch(21.5% 0.018 245);
  --ink-soft:    oklch(43.0% 0.016 245);
  --paper:       oklch(93.8% 0.006 235);
  --cream:       oklch(97.5% 0.004 235);
  --blush:       oklch(85.5% 0.055 40);
  --blush-paper: oklch(94.0% 0.028 40);
  --tape:        oklch(89.0% 0.022 235 / 0.75);
}

/* 04 ROSÉ — warmes Rosa-Papier, Beauty-Editorial */
:root[data-palette="rose"] {
  --ink:         oklch(24.0% 0.020 20);
  --ink-soft:    oklch(40.0% 0.020 20);
  --paper:       oklch(93.0% 0.030 25);
  --cream:       oklch(96.8% 0.017 30);
  --blush:       oklch(87.0% 0.050 25);
  --blush-paper: oklch(91.5% 0.040 25);
  --tape:        oklch(89.0% 0.035 30 / 0.75);
}

/* 05 SALBEI — gedecktes Gruengrau, ruhig, Galerie */
:root[data-palette="salbei"] {
  --ink:         oklch(23.0% 0.020 150);
  --ink-soft:    oklch(41.0% 0.020 150);
  --paper:       oklch(92.5% 0.018 140);
  --cream:       oklch(96.5% 0.010 140);
  --blush:       oklch(87.0% 0.045 60);
  --blush-paper: oklch(93.5% 0.025 80);
  --tape:        oklch(88.0% 0.025 140 / 0.75);
}

/* 06 SAND — tieferes Packpapier, kraeftiger als Creme */
:root[data-palette="sand"] {
  --ink:         oklch(25.0% 0.020 65);
  --ink-soft:    oklch(40.0% 0.020 65);
  --paper:       oklch(89.5% 0.045 80);
  --cream:       oklch(94.5% 0.030 85);
  --blush:       oklch(87.0% 0.050 45);
  --blush-paper: oklch(92.0% 0.035 55);
  --tape:        oklch(87.0% 0.040 85 / 0.7);
}


/* ------------------------------------------------------------
   ACHSE 3 — AKZENT
   Traegt Headline-Akzente, Linien, Hover, Marker. Laut Recherche
   hoechstens 10 Prozent der Flaeche. Alle drei sind auf beiden
   Grundtoenen ueber 4,5:1 im Fliesstext (--clay-deep als textsichere
   Variante).
   ------------------------------------------------------------ */

/* 02 VERMILLION — heisser Spot, Gig-Poster-Logik */
:root[data-accent="vermillion"] {
  --clay:      oklch(50.0% 0.185 30);
  --clay-deep: oklch(42.0% 0.160 30);
}

/* 03 FEDERAL BLUE — Two-Ink-Riso, 11,20:1 auf Papier */
:root[data-accent="riso"] {
  --clay:      oklch(38.0% 0.110 255);
  --clay-deep: oklch(32.0% 0.095 255);
}

/* 04 TANNE — tiefes Gruen, Theatervorhang */
:root[data-accent="tanne"] {
  --clay:      oklch(40.0% 0.090 155);
  --clay-deep: oklch(33.0% 0.075 155);
}

/* 05 PFLAUME — dunkle Beere, Samt */
:root[data-accent="pflaume"] {
  --clay:      oklch(40.0% 0.110 340);
  --clay-deep: oklch(33.0% 0.095 340);
}