/* =========================================================================
   ROUGE — Design Tokens
   Quelle: Selfspring / Rouge / CD Manual (Stand 08.2021)
   Diese Datei ist die "Wahrheit" des Rouge Design-Systems.
   Alle Komponenten & Post-Templates beziehen ihre Werte von hier.
   ========================================================================= */

/* ---- Schriften -------------------------------------------------------- */
/* Headlines/Logo laut CD: "Bigola Display" (nicht frei verfügbar → für
   Web/Posts nutzen wir Serenity Heavy/Bold als Display-Ersatz, was CD-konform
   ist: "Für weitere Anwendungen wird ausschliesslich die Serenity verwendet.")
   Das "Rouge"-Wortzeichen kommt immer aus dem Logo-SVG, nie aus Schrift. */

@font-face { font-family: "Serenity"; font-weight: 300; font-style: normal;
  src: url("assets/fonts/Serenity-Light.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Serenity"; font-weight: 300; font-style: italic;
  src: url("assets/fonts/Serenity-LightItalic.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Serenity"; font-weight: 500; font-style: normal;
  src: url("assets/fonts/Serenity-Medium.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Serenity"; font-weight: 600; font-style: normal;
  src: url("assets/fonts/Serenity-DemiBold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Serenity"; font-weight: 700; font-style: normal;
  src: url("assets/fonts/Serenity-Bold.otf") format("opentype"); font-display: swap; }
@font-face { font-family: "Serenity"; font-weight: 900; font-style: normal;
  src: url("assets/fonts/Serenity-Heavy.otf") format("opentype"); font-display: swap; }

:root {
  /* ---- Primärfarben (Logo, Sachet-Design) ---------------------------- */
  --rouge-dunkelrot: #6b161d;   /* Pantone 181  — dominante Markenfarbe   */
  --rouge-rot:       #d9443c;   /* Pantone 200  — Akzent, Call-to-Action  */
  --rouge-hellrot:   #f1a490;   /* Pantone 489  — warmer Coral-Grund      */
  --rouge-creme:     #fae5ce;   /* Pantone 7506 — heller Grund, Text auf  */
                                /*                dunklem Hintergrund      */

  /* ---- Sekundärfarben (weitere Kommunikationsmittel) ----------------- */
  --rouge-blau:      #2a3f8e;   /* Pantone 7687 — Illustrations-Akzent    */
  --rouge-grau:      #bcc2cb;   /* Pantone 428  — dezente Flächen/Linien  */
  --rouge-magenta:   #c94b79;   /* Pantone 4073 — Produktfarbe (Pulver)   */

  /* ---- Semantische Rollen -------------------------------------------- */
  --bg-warm:         var(--rouge-hellrot);
  --bg-deep:         var(--rouge-dunkelrot);
  --bg-soft:         var(--rouge-creme);
  --ink:             var(--rouge-dunkelrot);   /* Text auf hellem Grund   */
  --ink-invert:      var(--rouge-creme);       /* Text auf dunklem Grund  */
  --accent:          var(--rouge-rot);

  /* ---- Typografie ---------------------------------------------------- */
  --font-display: "Serenity", Georgia, serif;  /* Headlines (Heavy/Bold)  */
  --font-body:    "Serenity", Georgia, serif;  /* Fliesstext              */

  /* Type-Skala bezogen auf 1080px-Canvas (Instagram)                     */
  --fs-kicker:  30px;   /* Label / Augenbraue über der Headline           */
  --fs-h1:      104px;  /* grosse Claim-Headline                          */
  --fs-h2:      72px;   /* Sub-Headline                                   */
  --fs-lead:    44px;   /* Lead / Zitat                                   */
  --fs-body:    36px;   /* Fliesstext                                     */
  --fs-caption: 28px;   /* Bildunterschrift / Kleingedrucktes             */

  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-body:    1.4;

  --tracking-kicker: 0.22em;   /* Kicker/Labels immer weit gesperrt       */

  /* ---- Layout-Raster (Instagram-Safe-Zones) -------------------------- */
  --pad-x: 96px;    /* seitlicher Rand im Post                            */
  --pad-y: 110px;   /* oberer/unterer Rand                                */
  --radius: 40px;
}

/* ---- Basis-Bausteine, die alle Templates teilen ----------------------- */

.rouge-kicker {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.rouge-h1 {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
}

.rouge-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
}

.rouge-lead {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: var(--lh-snug);
}

.rouge-body {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}

/* Logo-Wortzeichen: immer als SVG, nie als Schrift nachgebaut.
   Standardhöhe ~ 5% der Canvas-Höhe. */
.rouge-logo { display: block; height: 64px; width: auto; }
.rouge-logo--sm { height: 48px; }
.rouge-logo--lg { height: 88px; }

/* Pill-Button / CTA im Rouge-Rot */
.rouge-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--fs-body);
  color: var(--rouge-creme);
  background: var(--rouge-rot);
  padding: 22px 48px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}