/* ============================================================
   Yıldız Entegre — Design-Tokens
   Quelle: 02-Designsystem.md §11. Werte sind verbindlich.
   Echte CI-Werte: nur --color-brand-* hier ersetzen.
   ============================================================ */

:root {
  /* --- Marke --- */
  --color-brand-amber-700: #B5651D;
  --color-brand-amber-500: #D98324;
  --color-brand-amber-300: #E8B583;
  --color-brand-fir-800: #1F3A2E;
  --color-brand-fir-600: #2F5848;
  --color-brand-fir-300: #9DB5AB;

  /* --- Neutral (warm) --- */
  --color-neutral-0: #FFFFFF;
  --color-neutral-50: #FAF8F4;
  --color-neutral-100: #F2EEE7;
  --color-neutral-200: #E5DFD4;
  --color-neutral-300: #D2C9B9;
  --color-neutral-400: #A89E8C;
  --color-neutral-500: #7A7264;
  --color-neutral-700: #4A4439;
  --color-neutral-900: #211E18;

  /* --- Material --- */
  --color-wood-oak: #C8A678;
  --color-wood-walnut: #6E4A2E;
  --color-wood-ash: #D9C9A8;
  --color-stone-concrete: #9B968D;
  --color-stone-marble: #E3E0DA;
  --color-uni-graphite: #3C3A37;

  /* --- Markenarchitektur --- */
  --color-mark-master: #46535B;
  --color-mark-trend: #8A6A4B;
  --color-mark-home: #A6443B;

  /* --- Semantik --- */
  --color-success: #3F7D4E;
  --color-success-bg: #EAF2EC;
  --color-warning: #B7791F;
  --color-warning-bg: #FBF1DD;
  --color-error: #B23A2E;
  --color-error-bg: #F7E7E4;
  --color-info: #2F5848;
  --color-info-bg: #E7EEEB;

  /* --- Hintergründe & Overlays --- */
  --bg-page: #FAF8F4;
  --bg-alt: #F2EEE7;
  --bg-surface: #FFFFFF;
  --bg-inverse: #1F3A2E;
  --bg-inverse-deep: #211E18;
  --overlay-image: rgba(33, 30, 24, 0.45);
  --overlay-image-strong: linear-gradient(180deg, rgba(33,30,24,0) 0%, rgba(33,30,24,0.78) 100%);
  --overlay-modal: rgba(33, 30, 24, 0.6);

  /* --- Schrift --- */
  --font-display: 'Fraunces', 'Times New Roman', Georgia, serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace;

  /* --- Type Scale (fluide) --- */
  --text-display: clamp(2.5rem, 1.6rem + 4.5vw, 4.75rem);
  --text-h1: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  --text-h2: clamp(1.625rem, 1.3rem + 1.6vw, 2.5rem);
  --text-h3: clamp(1.3125rem, 1.15rem + 0.8vw, 1.75rem);
  --text-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
  --text-h5: 1.0625rem;
  --text-overline: 0.8125rem;
  --text-body-l: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --text-body: 1rem;
  --text-body-s: 0.875rem;
  --text-caption: 0.78125rem;

  /* --- Radius / Linie --- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-hairline: 1px solid #D2C9B9;
  --border-strong: 1.5px solid #4A4439;

  /* --- Spacing --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --space-32: 128px;

  /* --- Container --- */
  --container-narrow: 760px;
  --container-max: 1320px;
  --container-wide: 1560px;
  --gutter: 24px;
  --page-padding: 16px;

  /* --- Motion --- */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 320ms;
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-in: cubic-bezier(.4,0,1,1);

  /* --- Schatten --- */
  --shadow-xs: 0 1px 2px rgba(33,30,24,.06);
  --shadow-sm: 0 2px 8px rgba(33,30,24,.08);
  --shadow-md: 0 8px 24px rgba(33,30,24,.12);
  --shadow-lg: 0 16px 48px rgba(33,30,24,.18);

  /* --- Z-Index --- */
  --z-content: 0;
  --z-sticky-filter: 100;
  --z-header: 1000;
  --z-megamenu: 1100;
  --z-modal-overlay: 2000;
  --z-modal: 2010;
  --z-toast: 3000;
  --z-cookie: 3500;

  /* --- Header-Höhen --- */
  --header-height: 80px;
  --header-height-scrolled: 64px;
}

@media (min-width: 600px) {
  :root { --page-padding: 32px; }
}
@media (min-width: 1024px) {
  :root { --page-padding: 48px; }
}