/* ============================================================
   FiveStarCamper Studio – design-tokens.css (AUTOMATISCH ERZEUGT)
   Quelle: design-tokens.json · Preset: "FiveStarCamper – Snow + Campfire Gold"
   NICHT VON HAND BEARBEITEN – Änderungen im Studio vornehmen.
   Wird NACH theme.css geladen und überschreibt Marken-Tokens.
   ============================================================ */
:root{
  /* ---- Markenfarben ---- */
  --color-night: #17191A;
  --color-surface: #1E2122;
  --color-gold: #D6A23E;
  --color-gold-dark: #B0801F;
  --color-gold-light: #E3B95C;
  --color-pine: #2E4034;
  --color-snow: #FBFAF7;
  --color-white: #FFFFFF;
  --color-bone: #E7E3D8;
  --color-stone: #9AA0A1;
  --color-ember: #DB7439;
  --color-clay: #B5623F;
  --color-dusk: #6E8CA0;
  --color-sage: #8C9C7A;
  --color-berry: #7C4A52;
  --color-sand: #EAD9B5;
  --color-success: #5E9469;
  --color-error: #C0503C;

  /* ---- Rollen ---- */
  --text-primary: var(--color-night);
  --text-secondary: #949594;
  --text-dim: #B2B2B0;
  --surface-card: var(--color-white);
  --surface-page: var(--color-snow);
  --surface-subtle: #F0EFEC;
  --surface-line: #E0DFDC;

  /* ---- Radien ---- */
  --radius-card: 18px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;

  /* ---- Abstands-Tokens ---- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --space-section: clamp(5.5rem, 9vw, 9rem);
  --space-side: clamp(1.5rem, 6vw, 4rem);
  --content-max: 1240px;
  --measure: 46rem;

  /* ---- Schatten ---- */
  --shadow-token-soft: 0 10px 34px rgba(23,25,26,0.07);
  --shadow-token-hover: 0 24px 56px rgba(23,25,26,0.13);
  --shadow-token-lift: 0 34px 70px rgba(23,25,26,0.16);

  /* ---- Übergänge ---- */
  --ease-token-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.25s;
  --duration-base: 0.35s;
  --duration-slow: 0.6s;

  /* ---- Breakpoints (als Referenzwerte, für JS/Studio) ---- */
  --bp-desktop-lg: 1440px;
  --bp-desktop: 1200px;
  --bp-laptop: 1024px;
  --bp-tablet: 768px;
  --bp-mobile-lg: 480px;
  --bp-mobile-sm: 375px;

  /* ---- Schriften ---- */
  --font-family-head: 'Bricolage Grotesque', 'Hanken Grotesk', Arial, sans-serif;
  --font-family-body: 'Hanken Grotesk', Arial, sans-serif;
  --font-family-mono: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---- Typografie-Stufen ---- */
  --type-display-xl-size: clamp(3.4rem, 6.6vw, 7.2rem);
  --type-display-xl-weight: 800;
  --type-display-xl-line-height: 0.98;
  --type-display-xl-letter-spacing: -0.035em;
  --type-display-xl-transform: none;
  --type-display-xl-font: var(--font-family-head);
  --type-hero-size: clamp(2.9rem, 6.4vw, 5.4rem);
  --type-hero-weight: 800;
  --type-hero-line-height: 1.02;
  --type-hero-letter-spacing: -0.035em;
  --type-hero-transform: none;
  --type-hero-font: var(--font-family-head);
  --type-h1-size: clamp(2.4rem, 5vw, 4.2rem);
  --type-h1-weight: 800;
  --type-h1-line-height: 1.04;
  --type-h1-letter-spacing: -0.03em;
  --type-h1-transform: none;
  --type-h1-font: var(--font-family-head);
  --type-h2-size: clamp(2.1rem, 4.2vw, 3.2rem);
  --type-h2-weight: 700;
  --type-h2-line-height: 1.06;
  --type-h2-letter-spacing: -0.028em;
  --type-h2-transform: none;
  --type-h2-font: var(--font-family-head);
  --type-h3-size: clamp(1.5rem, 2.6vw, 2.1rem);
  --type-h3-weight: 700;
  --type-h3-line-height: 1.1;
  --type-h3-letter-spacing: -0.02em;
  --type-h3-transform: none;
  --type-h3-font: var(--font-family-head);
  --type-h4-size: clamp(1.2rem, 1.6vw, 1.5rem);
  --type-h4-weight: 700;
  --type-h4-line-height: 1.15;
  --type-h4-letter-spacing: -0.015em;
  --type-h4-transform: none;
  --type-h4-font: var(--font-family-head);
  --type-card-title-size: clamp(1.3rem, 1.4vw, 1.6rem);
  --type-card-title-weight: 700;
  --type-card-title-line-height: 1.12;
  --type-card-title-letter-spacing: -0.015em;
  --type-card-title-transform: none;
  --type-card-title-font: var(--font-family-head);
  --type-body-lg-size: 1.1rem;
  --type-body-lg-weight: 400;
  --type-body-lg-line-height: 1.65;
  --type-body-lg-letter-spacing: 0em;
  --type-body-lg-transform: none;
  --type-body-lg-font: var(--font-family-body);
  --type-body-md-size: 1rem;
  --type-body-md-weight: 400;
  --type-body-md-line-height: 1.6;
  --type-body-md-letter-spacing: 0em;
  --type-body-md-transform: none;
  --type-body-md-font: var(--font-family-body);
  --type-body-sm-size: 0.875rem;
  --type-body-sm-weight: 400;
  --type-body-sm-line-height: 1.55;
  --type-body-sm-letter-spacing: 0em;
  --type-body-sm-transform: none;
  --type-body-sm-font: var(--font-family-body);
  --type-nav-size: 0.78rem;
  --type-nav-weight: 600;
  --type-nav-line-height: 1.2;
  --type-nav-letter-spacing: 0.08em;
  --type-nav-transform: none;
  --type-nav-font: var(--font-family-body);
  --type-button-size: 0.8rem;
  --type-button-weight: 500;
  --type-button-line-height: 1.2;
  --type-button-letter-spacing: 0.07em;
  --type-button-transform: uppercase;
  --type-button-font: var(--font-family-mono);
  --type-label-size: 0.74rem;
  --type-label-weight: 500;
  --type-label-line-height: 1.3;
  --type-label-letter-spacing: 0.24em;
  --type-label-transform: uppercase;
  --type-label-font: var(--font-family-mono);
  --type-price-size: 1.2rem;
  --type-price-weight: 700;
  --type-price-line-height: 1.1;
  --type-price-letter-spacing: -0.01em;
  --type-price-transform: none;
  --type-price-font: var(--font-family-head);
  --type-form-text-size: 1rem;
  --type-form-text-weight: 400;
  --type-form-text-line-height: 1.5;
  --type-form-text-letter-spacing: 0em;
  --type-form-text-transform: none;
  --type-form-text-font: var(--font-family-body);
  --type-hint-size: 0.82rem;
  --type-hint-weight: 400;
  --type-hint-line-height: 1.5;
  --type-hint-letter-spacing: 0em;
  --type-hint-transform: none;
  --type-hint-font: var(--font-family-body);

  /* ============================================================
     KOMPATIBILITÄT – bestehende Variablennamen bleiben nutzbar
     und verweisen auf die neuen Tokens.
     ============================================================ */
  --dark: var(--color-snow); --bg: var(--color-snow);
  --dark2: var(--color-white); --card: var(--color-white);
  --dark3: #F0EFEC; --beige: #F0EFEC;
  --dark4: #E0DFDC; --beige2: #E0DFDC;
  --dark5: #CDCDCB;
  --text: var(--color-night); --white: var(--color-night); --ink: var(--color-night);
  --text-muted: #949594;
  --gold: var(--color-gold); --gold-light: var(--color-gold-light);
  --gold-dim: rgba(214,162,62,0.10); --gold-border: rgba(214,162,62,0.32);
  --accent: var(--color-gold); --accent-dark: var(--color-gold-dark); --accent-light: var(--color-gold-light);
  --accent-dim: rgba(214,162,62,0.10); --border-accent: rgba(214,162,62,0.34);
  --night: var(--color-night); --pine: var(--color-pine); --surface: var(--color-surface);
  --green: var(--color-success); --red: var(--color-error);
  --border: rgba(23,25,26,0.09); --border-light: rgba(23,25,26,0.17);
  --font-head: var(--font-family-head); --font-sans: var(--font-family-body); --font-mono: var(--font-family-mono);
  --r-card: var(--radius-card); --r-ctrl: var(--radius-control);
  --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg);
  --shadow-soft: var(--shadow-token-soft); --shadow-hover: var(--shadow-token-hover); --shadow-lift: var(--shadow-token-lift);
  --ease-out: var(--ease-token-out);
  --stage-y: var(--space-section); --stage-x: var(--space-side);
  --gap-grid: clamp(1.2rem, 2.2vw, 2rem);
}