/* ==========================================================================
   Crème de la Crème - Design System & CSS Variables (variables.css)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Typography / Local Font Embedding (@font-face)
   -------------------------------------------------------------------------- */

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-regular.woff2') format('woff2'),
       url('../fonts/cormorant-garamond-regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-italic.woff2') format('woff2'),
       url('../fonts/cormorant-garamond-italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-500.woff2') format('woff2'),
       url('../fonts/cormorant-garamond-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cormorant Garamond';
  src: url('../fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2') format('woff2'),
       url('../fonts/cormorant-garamond-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CornerStoreJF';
  src: url('../fonts/CornerStoreJF.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Design Tokens & Color Palette
   -------------------------------------------------------------------------- */

:root {
  /* Opt-out aus Android/Browser Auto-Dark-Mode (W3C CSS Color Adjustment Level 1) */
  color-scheme: light;
  color-scheme: only light;
  forced-color-adjust: none;

  /* Haupt-Hintergrund (ca. 85-90% Flächenanteil) */
  --bg-primary: #FCF1E5;        /* Linen: Primäre Hintergrundfarbe */
  --bg-secondary: #F2E4D5;      /* Almond Cream: Kartenhintergründe, Sektionswechsel */

  /* Trennlinien & Struktur */
  --border-main: #E2D7CC;       /* Bone: Feine (1px) Linien auf Linen-Hintergrund */
  --border-pink: #F7C6D4;       /* Helles Pink Mist: Zarte Linien auf Petal-Frost-Flächen */

  /* Typografie */
  --text-main: #271C18;         /* Coffee Bean: Überschriften, Fließtext, Icons */
  --text-muted: #5E4941;        /* Abgetöntes Coffee Bean: Untertitel, Notizen, Meta-Infos */

  /* Akzente & Highlights (max. 10-20% Flächenanteil) */
  --accent-soft: #FADAE1;       /* Petal Frost: Zarter Sekundär-Hintergrund (z. B. Reservierungs-CTA) */
  --accent-hero: #EF9FB6;       /* Pink Mist: Primärer Call-to-Action, Badges, aktive States */
  --color-white: #FFFFFF;       /* Reinweiß: Kontrast-Karten, Preloader & modale Hintergründe */

  /* Layout & Spacing */
  --max-width: 1200px;
  --header-height: 80px;
  --transition-smooth: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);

  /* Schriftarten */
  --font-main: 'Cormorant Garamond', Georgia, serif;
  --font-accent: 'CornerStoreJF', cursive, sans-serif;
  --font-system: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   3. Universal CSS Reset & Base Rules
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  color-scheme: only light;
  forced-color-adjust: none;
  background-color: var(--bg-primary);
  color: var(--text-main);
}

body {
  font-family: var(--font-main);
  background-color: var(--bg-primary);
  color: var(--text-main);
  color-scheme: light;
  color-scheme: only light;
  forced-color-adjust: none;
  font-size: 1.15rem;
  line-height: 1.65;
  overflow-x: hidden;
  overflow-wrap: break-word;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Expliziter Schutz gegen System-Dark-Mode (Android Auto-Dark, iOS, Desktop) */
@media (prefers-color-scheme: dark) {
  :root,
  html,
  body {
    color-scheme: light;
    color-scheme: only light;
    forced-color-adjust: none;
    --bg-primary: #FCF1E5;
    --bg-secondary: #F2E4D5;
    --border-main: #E2D7CC;
    --border-pink: #F7C6D4;
    --text-main: #271C18;
    --text-muted: #5E4941;
    --accent-soft: #FADAE1;
    --accent-hero: #EF9FB6;
    --color-white: #FFFFFF;
    background-color: #FCF1E5;
    color: #271C18;
  }
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}