/* ============================================================
   ZorneGYM — Design Tokens & Schriften
   Marke: Gold & Schwarz auf hellem, warmem Untergrund
   ============================================================ */

/* ---------- Self-hosted Schriften (DSGVO-konform) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-400.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/inter-500.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-600.woff2") format("woff2");}
@font-face{font-family:"Inter";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/inter-700.woff2") format("woff2");}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/bricolage-600.woff2") format("woff2");}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/bricolage-700.woff2") format("woff2");}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/bricolage-800.woff2") format("woff2");}

:root{
  /* ---------- Farben ---------- */
  --paper:#FBF8F1;          /* Haupt-Hintergrund, warmes Off-White */
  --sand:#F3EBDA;           /* alternierender Abschnitt */
  --sand-deep:#EADFC6;      /* Karten / Tiefe */
  --ink:#17150F;            /* warmes Fast-Schwarz, Text & dunkle Bänder */
  --ink-2:#211E16;
  --ink-soft:#34302A;
  --muted:#6E6556;          /* Sekundärtext (Kontrast ~4.7:1 auf paper) */
  --muted-on-ink:#C3BBA8;   /* Sekundärtext auf dunklem Grund */
  --line:rgba(23,21,15,.12);
  --line-strong:rgba(23,21,15,.22);
  --line-on-ink:rgba(231,201,119,.20);

  --gold:#C49A3F;           /* Primär-Gold (Akzent, nicht für Fließtext) */
  --gold-bright:#E7C977;
  --gold-deep:#9A7327;
  --gold-soft:rgba(196,154,63,.14);
  --white:#ffffff;

  --grad-gold:linear-gradient(135deg,#F1D588 0%,#CC9E3F 46%,#9A7327 100%);
  --grad-gold-soft:linear-gradient(135deg,#F6EBC9,#E7C977);
  --grad-ink:linear-gradient(165deg,#262219 0%,#121009 100%);
  --grad-sheen:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.55) 18%,transparent 38%);

  /* ---------- Typografie ---------- */
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Bricolage Grotesque","Inter",system-ui,sans-serif;

  --fs-eyebrow:.78rem;
  --fs-small:.9rem;
  --fs-body:1.0625rem;
  --fs-lead:clamp(1.15rem,1.6vw,1.4rem);
  --fs-h3:clamp(1.25rem,2.2vw,1.6rem);
  --fs-h2:clamp(1.9rem,3.6vw,2.85rem);
  --fs-h1:clamp(2.3rem,5vw,3.7rem);
  --fs-display:clamp(2.9rem,7.4vw,6rem);

  /* ---------- Layout ---------- */
  --maxw:1180px;
  --maxw-wide:1320px;
  --maxw-narrow:760px;
  --gutter:clamp(1.15rem,4vw,2.6rem);
  --space-section:clamp(4.5rem,9vw,8rem);

  /* ---------- Radien / Schatten ---------- */
  --r-sm:10px;
  --r:16px;
  --r-lg:26px;
  --r-xl:34px;
  --r-pill:999px;

  --shadow-sm:0 2px 10px rgba(28,22,8,.06);
  --shadow:0 16px 44px -20px rgba(28,22,8,.30);
  --shadow-lg:0 34px 70px -28px rgba(28,22,8,.40);
  --shadow-gold:0 16px 36px -14px rgba(196,154,63,.5);

  /* ---------- Motion ---------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,.84,.44,1);
  --t-fast:.2s var(--ease);
  --t:.45s var(--ease);
  --header-h:74px;
}