/* ============================================================
   CLASSY — Tokens (Brand Guidelines 4.0)
   Ink, Paper, Rust, Gold. Kein Verlauf, kein Neon, keine Effekte.
   Farben nur hier ändern.
   ============================================================ */

/* --- Schriften: lokal, alle SIL OFL, von collletttivo.it ------ */
@font-face { font-family: 'Mazius Display'; src: url('../fonts/mazius-regular.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Mazius Display'; src: url('../fonts/mazius-extraitalic.woff2') format('woff2');
             font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Mazius Display'; src: url('../fonts/mazius-extraitalic-bold.woff2') format('woff2');
             font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Ronzino'; src: url('../fonts/ronzino-regular.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ronzino'; src: url('../fonts/ronzino-medium.woff2') format('woff2');
             font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ronzino'; src: url('../fonts/ronzino-bold.woff2') format('woff2');
             font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Necto Mono'; src: url('../fonts/necto-mono-regular.woff2') format('woff2');
             font-weight: 400; font-style: normal; font-display: swap; }

:root {
  /* Marke */
  --ink:   #0F0E0D;   /* Schrift, Fotos, Nacht */
  --paper: #F4EFE6;   /* Grund. Viel Luft. */
  --rust:  #B5471A;   /* Label, Akzente, Buttons */
  --gold:  #C8A15A;   /* Nur Details */

  /* Abgeleitet: der Papierton der Sticker-Seite im Styleguide */
  --sand:  #DDD5C8;

  /* Rollen */
  --font-display: 'Mazius Display', 'Times New Roman', serif;   /* Gefühl */
  --font-mono: 'Necto Mono', ui-monospace, Menlo, monospace;    /* Fakten */
  --font-body: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;  /* Lesen */

  /* Grössen */
  --fs-mono:  0.75rem;
  --fs-small: 0.9375rem;
  --fs-base:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --fs-h3:    clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  --fs-title: clamp(3.25rem, 2rem + 6vw, 7.5rem);

  --track-mono: 0.14em;

  /* Abstände */
  --gutter:  clamp(1.25rem, 4vw, 3.75rem);
  --section: clamp(4.5rem, 9vw, 9rem);
  --nav-h:   4rem;

  /* Bewegung */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: 220ms;
}

/* Jede Sektion ist eine Seite im Styleguide: eine Tonart, zwei Farben. */
.tone-ink   { --bg: var(--ink);   --fg: var(--paper); --soft: rgba(244,239,230,.74); --rule: rgba(244,239,230,.32); --accent: var(--gold); }
.tone-paper { --bg: var(--paper); --fg: var(--ink);   --soft: rgba(15,14,13,.74);    --rule: rgba(15,14,13,.32);    --accent: var(--rust); }
.tone-sand  { --bg: var(--sand);  --fg: var(--ink);   --soft: rgba(15,14,13,.78);    --rule: rgba(15,14,13,.32);    --accent: #9C3B13; }
.tone-rust  { --bg: var(--rust);  --fg: var(--paper); --soft: rgba(244,239,230,.92); --rule: rgba(244,239,230,.4);  --accent: var(--paper); }