/* ==========================================================================
   Ferienhaus Deichglück — Design Tokens
   ==========================================================================
   Zentrale Design-Variablen ("Coastal Heritage" Design-System).
   Farben, Schriften und Abstände hier ändern — die ganze Website passt
   sich automatisch an. Komponenten-Styles: siehe styles.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Schriften (selbst gehostet — DSGVO-konform, keine Google-Server)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/libre-caslon-text-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Libre Caslon Text';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/libre-caslon-text-700.woff2') format('woff2');
}

/* Variable Font: deckt alle Schriftschnitte 200–800 ab */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../assets/fonts/plus-jakarta-sans-var.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   Design-Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ----- Farben: Kernpalette ---------------------------------------------
     Das komplette Farbschema wird von diesen Werten abgeleitet.
     Zum Umgestalten der Website genügt es, diese Gruppe anzupassen. */

  /* Tiefes Ozeanblau — Primärfarbe (Navigation, Buttons, Überschriften) */
  --color-primary:              #041926;
  --color-primary-container:    #1a2e3b;
  --color-on-primary:           #ffffff;
  --color-primary-fixed:        #d0e5f7;
  --color-primary-fixed-dim:    #b4c9da;
  --color-on-primary-fixed:     #081e2a;

  /* Sandbeige — Sekundärfarbe (Rahmen, warme Akzente) */
  --color-secondary:            #6b5c4c;
  --color-secondary-container:  #f4dfcb;
  --color-on-secondary:         #ffffff;

  /* Seegras-Grün — Tertiärfarbe (Ausstattungs-Chips, Natur-Akzente) */
  --color-tertiary:             #001c08;
  --color-tertiary-fixed:       #c6ecc8;
  --color-on-tertiary-fixed:    #01210b;

  /* Fehler / Belegt-Zustände */
  --color-error:                #ba1a1a;
  --color-error-container:      #ffdad6;
  --color-on-error-container:   #93000a;

  /* Flächen & Text */
  --color-surface:              #f9f9f7;   /* Seitenhintergrund ("Bone") */
  --color-surface-lowest:       #ffffff;   /* Karten-Oberflächen */
  --color-surface-container:    #eeeeec;
  --color-surface-dim:          #dadad8;
  --color-on-surface:           #1a1c1b;   /* Standard-Textfarbe */
  --color-on-surface-variant:   #43474b;   /* Gedämpfte Textfarbe */
  --color-outline:              #73777c;
  --color-outline-variant:      #c3c7cc;

  /* ----- Abgeleitete Farbvarianten (mit Transparenz) ---------------------- */
  --color-border-soft:      color-mix(in srgb, var(--color-secondary) 40%, transparent);
  --color-border-softer:    color-mix(in srgb, var(--color-secondary) 20%, transparent);
  /* Abdunklung des Titelbilds für die weiße Schrift. 45 % waren sicher lesbar,
     nahmen dem Foto aber rund 40 % Helligkeit; 22 % sind der gewählte Kompromiss */
  --color-hero-overlay:     color-mix(in srgb, var(--color-primary) 22%, transparent);
  --color-chip-bg:          color-mix(in srgb, var(--color-tertiary-fixed) 30%, transparent);
  --color-chip-border:      color-mix(in srgb, var(--color-tertiary) 10%, transparent);
  --color-day-booked-bg:    color-mix(in srgb, var(--color-error) 22%, var(--color-error-container));
  --color-day-range-bg:     color-mix(in srgb, var(--color-primary) 15%, transparent);
  --color-header-bg:        color-mix(in srgb, var(--color-surface) 85%, transparent);

  /* ----- Typografie ------------------------------------------------------- */
  --font-serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --font-sans:  'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;

  /* Größen-Stufen (Desktop) */
  --text-display-lg:    64px;   /* Hero-Überschrift */
  --text-headline-md:   32px;   /* Sektions-Überschriften */
  --text-headline-sm:   24px;   /* Karten-Überschriften */
  --text-body-lg:       18px;
  --text-body-md:       16px;
  --text-label-caps:    12px;   /* Labels / Navigation (VERSALIEN) */

  /* Mobile Überschreibung (siehe styles.css Media Queries) */
  --text-display-lg-mobile: 40px;

  --leading-display:    1.1;
  --leading-headline:   1.3;
  --leading-body:       1.6;
  --tracking-display:   -0.02em;
  --tracking-caps:      0.1em;

  /* ----- Abstände & Layout ------------------------------------------------ */
  --container-max:      1280px;

  /* Maximale Seitenbreite: die Breite eines 16:9-QHD-Bildschirms.
     Auf Ultrawide-Monitoren zentriert sich die Seite dadurch,
     auf normalen Bildschirmen ändert sich nichts. */
  --page-max:           2560px;
  --gutter:             2rem;
  --margin-desktop:     4rem;
  --margin-mobile:      1.5rem;
  --section-gap:        8rem;    /* Vertikaler Abstand zwischen Sektionen */
  --section-gap-mobile: 5rem;
  --stack-sm:           0.5rem;
  --stack-md:           1rem;
  --stack-lg:           2rem;

  /* ----- Form & Tiefe ----------------------------------------------------- */
  --radius-sm:          0.125rem;
  --radius:             0.25rem;
  --radius-md:          0.375rem;
  --radius-lg:          0.5rem;
  --radius-xl:          0.75rem;
  --radius-full:        9999px;

  --shadow-ambient:     0 10px 30px rgba(26, 46, 59, 0.04);
  --shadow-button:      0 10px 30px rgba(4, 25, 38, 0.2);

  /* ----- Bewegung --------------------------------------------------------- */
  --transition:         300ms ease-in-out;
  --transition-slow:    700ms ease-in-out;

  /* ----- Header ----------------------------------------------------------- */
  --header-height:      72px;
}