/* ==========================================================================
   Graskind – Design-Tokens
   Markenfarben laut Corporate-Design-Manual (Abschnitt 4), Papiertöne aus dem
   Kartenpapier der Originalprodukte gemessen. Alle Farben nur hier pflegen.
   ========================================================================== */

@font-face { font-family: "Onest"; src: url("../fonts/onest-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Onest"; src: url("../fonts/onest-extrabold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* Marke (CI) */
  --gk-green: #04785C;          /* Graskind-Grün – Markenanker */
  --gk-green-light: #ADD5AF;    /* Helles Graskind-Grün */
  --gk-yellow: #FFC801;         /* Silphie-Gelb – nur Akzent */

  /* Ableitungen der Markenfarben */
  --gk-green-deep: #03503D;
  --gk-green-ink: #023528;
  --gk-green-mist: #DDECDA;

  /* Graspapier */
  --paper: #F3EADA;
  --paper-2: #E9DCC2;
  --paper-3: #D9C7A4;
  --paper-white: #FBF7EE;
  --paper-back: #E4D8BF;        /* neutrale, unbekannte Rückseiten */

  /* Text */
  --ink: #10231C;
  --ink-soft: #3C4B43;
  --ink-mute: #5B675F;
  --line: rgba(16, 35, 28, .14);
  --line-strong: rgba(16, 35, 28, .28);

  /* Szenenfarben */
  --night: #0A1426;
  --night-2: #142640;
  --kitchen: #EAD7BC;
  --chili: #B5402B;
  --chili-soft: #E8B9A2;
  --herb: #5E7A3A;
  --herb-soft: #C9D3A8;

  /* Deckfarben – gemessen auf den Originalkarten */
  --deck-afrika: #E68708;
  --deck-ozean: #9BD1E8;
  --deck-wald: #5DB77B;
  --deck-voegel: #D180B5;
  --deck-greif: #6BB2AC;
  --deck-raubkatzen: #6DABB6;
  --deck-hunde: #AAC790;
  --deck-katzen: #DBAAAD;
  --deck-pferde: #93B8D0;

  /* Texturen (eigene, prozedural erzeugt) */
  --tex-fibers: url("../img/texture/fibers.webp");
  --tex-grain: url("../img/texture/grain.webp");
  --tex-macro: url("../img/texture/macro.webp");

  /* Typografie – Onest (SIL OFL 1.1) */
  --font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-display: clamp(2.6rem, 1.15rem + 5.6vw, 6.6rem);
  --fs-h2: clamp(2.15rem, 1.25rem + 3.7vw, 4.6rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 1vw, 1.85rem);
  --fs-lead: clamp(1.1rem, 1rem + .45vw, 1.36rem);
  --fs-body: clamp(1rem, .97rem + .15vw, 1.075rem);
  --fs-small: .9rem;
  --fs-label: .78rem;

  /* Raster und Abstände */
  --maxw: 1320px;
  --gutter: clamp(1rem, .45rem + 2.4vw, 2.75rem);
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.25rem;
  --space-5: clamp(3rem, 2rem + 4vw, 6rem);
  --space-6: clamp(4.5rem, 3rem + 6vw, 9rem);
  --header-h: 72px;

  --radius-s: 6px;
  --radius: 12px;
  --radius-l: 24px;

  /* Papier-Schatten: Kontakt + Streulicht */
  --shadow-1: 0 1px 1px rgba(46, 34, 10, .10), 0 4px 10px -4px rgba(46, 34, 10, .18);
  --shadow-2: 0 1px 2px rgba(46, 34, 10, .10), 0 10px 22px -10px rgba(46, 34, 10, .30), 0 28px 50px -24px rgba(46, 34, 10, .28);
  --shadow-3: 0 2px 3px rgba(30, 22, 6, .12), 0 18px 36px -14px rgba(30, 22, 6, .38), 0 48px 80px -36px rgba(30, 22, 6, .36);

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --focus: 0 0 0 3px var(--paper-white), 0 0 0 6px var(--gk-green-deep);
}

@media (max-width: 760px) {
  :root { --header-h: 62px; }
}