/* studio.EWIG — Colors & Typography Tokens
 * Sourced from studio.ewig/index.html (:root) + observed usage across pages.
 * Two type systems coexist in the codebase:
 *   - Marketing (index.html, kontaktformular.html): Canva Sans (proprietary; substituted with Manrope)
 *   - Editorial / Studio pages (studio.html, booking.html): Syncopate (display) + Manrope (body)
 * The editorial pairing is the more distinctive brand voice — we promote it as primary.
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&family=Syncopate:wght@400;700&display=swap");

:root {
  /* ---------- Color: brand core ---------- */
  --c-bg:       #faf8f4;  /* primary cream / paper. used as page bg on most surfaces */
  --c-bg-warm:  #ebebe6;  /* warmer cream — appears as alt :root --c-bg in index.html */
  --c-bg-stone: #e6e4df;  /* a soft stone tint, used for cards/panels on cream */
  --c-dark:     #51554a;  /* the brand olive/grey — primary text, dark backgrounds */
  --c-darker:   #464a40;  /* slightly deeper olive; secondary card on dark sections */
  --c-accent:   #8b8b7e;  /* warm sage; used for muted text, hover, accent borders */
  --c-ink:      #1a1a1a;  /* near-black, used sparingly on form pages and dark CTAs */

  /* ---------- Color: semantic ---------- */
  --fg:           var(--c-dark);
  --fg-muted:     var(--c-accent);
  --fg-on-dark:   var(--c-bg);
  --bg:           var(--c-bg);
  --bg-alt:       var(--c-bg-warm);
  --surface:      #ffffff;          /* white cards, used on form pages */
  --surface-soft: var(--c-bg-stone);
  --border:       rgba(81, 85, 74, 0.10);   /* --c-dark @ 10% */
  --border-strong:rgba(81, 85, 74, 0.20);
  --border-on-dark: rgba(250, 248, 244, 0.10);

  /* ---------- Type: families ---------- */
  --font-display: "Syncopate", "Arial Narrow", sans-serif;     /* widely-tracked, geometric uppercase display */
  --font-body:    "Manrope", -apple-system, system-ui, sans-serif; /* humanist sans, light-to-bold */
  --font-marketing: "Manrope", sans-serif;                       /* substitutes Canva Sans on marketing pages */

  /* ---------- Type: scale (px-anchored, fluid clamps for hero) ---------- */
  --fs-xxs:  10px;   /* nav, eyebrow labels (uppercase, tracked) */
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   20px;   /* h4 / display small */
  --fs-xl:   24px;   /* h3 */
  --fs-2xl:  32px;
  --fs-3xl:  48px;   /* h2 */
  --fs-4xl:  72px;
  --fs-hero: clamp(2rem, 9vw, 9rem);   /* HERO Syncopate — "RAUM FÜR VISIONEN" */
  --fs-hero-cap: clamp(2rem, 6vw, 4.5rem); /* section openers */

  /* ---------- Type: tracking ---------- */
  --tr-tightest: -0.04em;  /* hero display */
  --tr-tight:    -0.02em;
  --tr-normal:   0;
  --tr-wide:     0.1em;
  --tr-widest:   0.2em;    /* small caps eyebrow */
  --tr-mega:     0.3em;    /* HERO subline tracking */
  --tr-ultra:    0.4em;    /* tiny uppercase metadata */

  /* ---------- Type: weights ---------- */
  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;
  --fw-semi:  600;
  --fw-bold:  700;

  /* ---------- Spacing ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- Radius (the brand is mostly square) ---------- */
  --r-none: 0;
  --r-sm:   2px;
  --r-pill: 999px;     /* used only on nav CTA buttons */

  /* ---------- Shadow ---------- */
  --sh-card: 0 1px 0 rgba(0,0,0,0.02), 0 0 0 1px rgba(81,85,74,0.06);
  --sh-lift: 0 25px 50px -12px rgba(0, 0, 0, 0.40);   /* the stack-card shadow */
  --sh-modal: 0 50px 100px rgba(0, 0, 0, 0.20);
  --sh-xl:   0 20px 40px rgba(0, 0, 0, 0.12);

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);   /* signature lenis-ish ease */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:   180ms;
  --dur-base:   300ms;
  --dur-slow:   500ms;
  --dur-cinema: 1200ms;  /* hero word reveals */
}

/* =========================================================
   Base + semantic element styles
   ========================================================= */

html, body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.display { font-family: var(--font-display); }
.body    { font-family: var(--font-body); }

h1, .h1 {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: 0.9;
  letter-spacing: var(--tr-tightest);
  font-weight: var(--fw-reg);
  text-transform: uppercase;
  margin: 0;
}

h2, .h2 {
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  line-height: 1.0;
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-reg);
  margin: 0;
}

h3, .h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  letter-spacing: var(--tr-tight);
  font-weight: var(--fw-bold);
  line-height: 1.1;
  margin: 0;
}

h4, .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tr-normal);
  margin: 0;
}

p, .p {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  font-weight: var(--fw-light);
  line-height: 1.65;
  color: rgba(81, 85, 74, 0.90);
  margin: 0;
}

.body-sm  { font-size: var(--fs-sm); line-height: 1.6; }
.body-xs  { font-size: var(--fs-xs); line-height: 1.5; }

/* The signature element: tiny uppercase tracked label */
.eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  font-weight: var(--fw-bold);
  color: var(--fg-muted);
}

.eyebrow-mega {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--tr-mega);
  font-weight: var(--fw-semi);
}

/* The dot+label pattern from "Willkommen im Studio" */
.eyebrow-dot {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  font-weight: var(--fw-semi);
  color: var(--fg-muted);
}
.eyebrow-dot::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-muted);
}

a { color: inherit; text-decoration: none; }
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--sp-7) 0;
}

/* =========================================================
   Reusable atoms (exposed as classes for the UI kit)
   ========================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-body);
  font-size: var(--fs-xxs);
  text-transform: uppercase;
  letter-spacing: var(--tr-widest);
  font-weight: var(--fw-bold);
  padding: 16px 32px;
  border: 1px solid currentColor;
  background: transparent;
  color: var(--c-dark);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.btn:hover { background: var(--c-dark); color: var(--c-bg); }

.btn--solid {
  background: var(--c-dark);
  color: var(--c-bg);
  border-color: var(--c-dark);
}
.btn--solid:hover { background: var(--c-accent); border-color: var(--c-accent); }

.btn--pill { border-radius: var(--r-pill); padding: 10px 20px; }

.btn--ghost-on-dark {
  border-color: rgba(250,248,244,0.20);
  color: var(--c-bg);
}
.btn--ghost-on-dark:hover { background: var(--c-bg); color: var(--c-dark); }

/* Noise overlay — recurring brand texture */
.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PScwIDAgMjAwIDIwMCcgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC42NScgbnVtT2N0YXZlcz0nMycgc3RpdGNoVGlsZXM9J3N0aXRjaCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNuKScgb3BhY2l0eT0nMScvPjwvc3ZnPg==");
}