/* ==========================================================================
   Ferienwohnung Irslenbach – Material Design 3 Theme
   Seed-Farben aus dem Logo:
     Primary   #E2007A (Magenta, Haus)      → Tonpalette Hue 360
     Tertiary  #97BE0D (Grün, Bach/Weg)     → Tonpalette Hue 124
     Neutral   #58585A (Schriftzug)         → Hue 355, Chroma 2.5
   Tonwerte erzeugt mit HCT (material-color-utilities)
   ========================================================================== */

@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-italic.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* Markenfarben (unverändert aus dem Logo) */
  --brand-magenta: #E2007A;
  --brand-green: #97BE0D;

  /* --- MD3 Light Scheme --- */
  --md-sys-color-primary: #B90063;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #FFD9E2;
  --md-sys-color-on-primary-container: #3E001D;

  --md-sys-color-secondary: #77555F;
  --md-sys-color-on-secondary: #FFFFFF;
  --md-sys-color-secondary-container: #FFD9E2;
  --md-sys-color-on-secondary-container: #2C141C;

  --md-sys-color-tertiary: #506600;
  --md-sys-color-on-tertiary: #FFFFFF;
  --md-sys-color-tertiary-container: #C8F24A;
  --md-sys-color-on-tertiary-container: #161F00;

  --md-sys-color-error: #BA1A1A;
  --md-sys-color-on-error: #FFFFFF;
  --md-sys-color-error-container: #FFDAD6;
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-surface: #FFF8F8;
  --md-sys-color-surface-dim: #E0D8D9;
  --md-sys-color-surface-bright: #FFF8F8;
  --md-sys-color-surface-container-lowest: #FFFFFF;
  --md-sys-color-surface-container-low: #FAF1F2;
  --md-sys-color-surface-container: #F4ECED;
  --md-sys-color-surface-container-high: #EFE6E7;
  --md-sys-color-surface-container-highest: #E9E0E1;
  --md-sys-color-on-surface: #1E1B1C;
  --md-sys-color-on-surface-variant: #4E4447;
  --md-sys-color-outline: #807477;
  --md-sys-color-outline-variant: #D2C3C6;
  --md-sys-color-inverse-surface: #332F30;
  --md-sys-color-inverse-on-surface: #F7EFF0;
  --md-sys-color-inverse-primary: #FFB1C8;
  --md-sys-color-scrim: #000000;
  --md-sys-color-shadow: #000000;

  /* Logo (theme-fähig) */
  --logo-bg: var(--md-sys-color-surface);
  --logo-shade-1: #EDEDEE;
  --logo-shade-2: #D9DADB;
  --logo-light: #B1B3B4;
  --logo-dark: #58585A;

  /* Grundriss */
  --plan-bg: var(--md-sys-color-surface-container-lowest);
  --plan-floor: var(--md-sys-color-surface-container-low);
  --plan-fill-2: var(--md-sys-color-surface-container-high);
  --plan-line: var(--md-sys-color-outline-variant);
  --plan-mid: var(--md-sys-color-outline);
  --plan-ink: var(--md-sys-color-on-surface);
  --plan-ink-soft: var(--md-sys-color-on-surface-variant);
  --plan-furniture: #9A8D91;

  /* Belegungskalender */
  --cal-occupied: var(--md-sys-color-surface-container-highest);
  --cal-range: var(--md-sys-color-primary-container);

  /* Typografie */
  --md-ref-typeface-brand: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --md-ref-typeface-plain: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Form */
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-large-increased: 20px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-extra-large-increased: 32px;
  --md-sys-shape-corner-full: 999px;

  /* Elevation */
  --md-sys-elevation-1: 0 1px 2px rgb(0 0 0 / .30), 0 1px 3px 1px rgb(0 0 0 / .15);
  --md-sys-elevation-2: 0 1px 2px rgb(0 0 0 / .30), 0 2px 6px 2px rgb(0 0 0 / .15);
  --md-sys-elevation-3: 0 4px 8px 3px rgb(0 0 0 / .15), 0 1px 3px rgb(0 0 0 / .30);

  /* Motion */
  --md-sys-motion-easing-standard: cubic-bezier(.2, 0, 0, 1);
  --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(.05, .7, .1, 1);
  --md-sys-motion-duration-short: 150ms;
  --md-sys-motion-duration-medium: 300ms;
  --md-sys-motion-duration-long: 500ms;

  /* Layout */
  --page-max: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-space: clamp(64px, 10vw, 128px);
}

/* --- MD3 Dark Scheme --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --md-sys-color-primary: #FFB1C8;
    --md-sys-color-on-primary: #650033;
    --md-sys-color-primary-container: #8E004A;
    --md-sys-color-on-primary-container: #FFD9E2;
    --md-sys-color-secondary: #E6BCC7;
    --md-sys-color-on-secondary: #442831;
    --md-sys-color-secondary-container: #5D3E47;
    --md-sys-color-on-secondary-container: #FFD9E2;
    --md-sys-color-tertiary: #ADD52D;
    --md-sys-color-on-tertiary: #283500;
    --md-sys-color-tertiary-container: #3B4D00;
    --md-sys-color-on-tertiary-container: #C8F24A;
    --md-sys-color-error: #FFB4AB;
    --md-sys-color-on-error: #690005;
    --md-sys-color-error-container: #93000A;
    --md-sys-color-on-error-container: #FFDAD6;
    --md-sys-color-surface: #161313;
    --md-sys-color-surface-dim: #161313;
    --md-sys-color-surface-bright: #3C3839;
    --md-sys-color-surface-container-lowest: #100D0E;
    --md-sys-color-surface-container-low: #1E1B1C;
    --md-sys-color-surface-container: #221F20;
    --md-sys-color-surface-container-high: #2D292A;
    --md-sys-color-surface-container-highest: #383435;
    --md-sys-color-on-surface: #E9E0E1;
    --md-sys-color-on-surface-variant: #D2C3C6;
    --md-sys-color-outline: #9A8D91;
    --md-sys-color-outline-variant: #4E4447;
    --md-sys-color-inverse-surface: #E9E0E1;
    --md-sys-color-inverse-on-surface: #332F30;
    --md-sys-color-inverse-primary: #B90063;
    --logo-shade-1: #2D292A;
    --logo-shade-2: #383435;
    --logo-light: #A9A3A4;
    --logo-dark: #E9E0E1;
    --plan-furniture: #806F74;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --md-sys-color-primary: #FFB1C8;
  --md-sys-color-on-primary: #650033;
  --md-sys-color-primary-container: #8E004A;
  --md-sys-color-on-primary-container: #FFD9E2;
  --md-sys-color-secondary: #E6BCC7;
  --md-sys-color-on-secondary: #442831;
  --md-sys-color-secondary-container: #5D3E47;
  --md-sys-color-on-secondary-container: #FFD9E2;
  --md-sys-color-tertiary: #ADD52D;
  --md-sys-color-on-tertiary: #283500;
  --md-sys-color-tertiary-container: #3B4D00;
  --md-sys-color-on-tertiary-container: #C8F24A;
  --md-sys-color-error: #FFB4AB;
  --md-sys-color-on-error: #690005;
  --md-sys-color-error-container: #93000A;
  --md-sys-color-on-error-container: #FFDAD6;
  --md-sys-color-surface: #161313;
  --md-sys-color-surface-dim: #161313;
  --md-sys-color-surface-bright: #3C3839;
  --md-sys-color-surface-container-lowest: #100D0E;
  --md-sys-color-surface-container-low: #1E1B1C;
  --md-sys-color-surface-container: #221F20;
  --md-sys-color-surface-container-high: #2D292A;
  --md-sys-color-surface-container-highest: #383435;
  --md-sys-color-on-surface: #E9E0E1;
  --md-sys-color-on-surface-variant: #D2C3C6;
  --md-sys-color-outline: #9A8D91;
  --md-sys-color-outline-variant: #4E4447;
  --md-sys-color-inverse-surface: #E9E0E1;
  --md-sys-color-inverse-on-surface: #332F30;
  --md-sys-color-inverse-primary: #B90063;
  --logo-shade-1: #2D292A;
  --logo-shade-2: #383435;
  --logo-light: #A9A3A4;
  --logo-dark: #E9E0E1;
  --plan-furniture: #806F74;
}