/* =======================================================================
   Pawfect Dogcare · Design Tokens
   Glassmorphism + warm earthy palette inspired by autumn forest tones
   from the brand photography (Emma & Scar, rhodesian ridgebacks).
   ======================================================================= */

:root {
  /* -------- Color · Brand --------
     Anchored to the warm rust/terracotta of the dogs' coats and the
     cream/forest tones of Julia's outdoor sessions. */
  --pf-rust-50:  #fbf3ee;
  --pf-rust-100: #f4e0d2;
  --pf-rust-200: #e8bda3;
  --pf-rust-300: #d99878;
  --pf-rust-400: #c97651;
  --pf-rust-500: #b85a36;   /* primary accent — terracotta */
  --pf-rust-600: #9a4626;
  --pf-rust-700: #783619;
  --pf-rust-800: #552411;
  --pf-rust-900: #2e1408;

  --pf-forest-50:  #f1f3ee;
  --pf-forest-100: #dde2d4;
  --pf-forest-200: #b9c2a6;
  --pf-forest-300: #8e9b78;
  --pf-forest-400: #677556;
  --pf-forest-500: #4a583c;   /* secondary — forest green */
  --pf-forest-600: #38442d;
  --pf-forest-700: #2a3322;
  --pf-forest-800: #1c2317;
  --pf-forest-900: #0f140c;

  --pf-cream-50:  #fbf8f3;   /* page bg light */
  --pf-cream-100: #f5efe6;
  --pf-cream-200: #ebe2d2;
  --pf-cream-300: #d8c9b1;

  --pf-ink-900: #2a221b;     /* primary text on light */
  --pf-ink-700: #5a4d40;     /* secondary text */
  --pf-ink-500: #8a7d6e;     /* tertiary text */
  --pf-ink-300: #b8ac9c;     /* placeholder */

  /* -------- Color · Semantic --------
     Mapped onto the Kalender capacity coloring per the brief. */
  --pf-ok:       #6b8e5a;   /* libre — green */
  --pf-medium:   #d4a64a;   /* halb voll — amber */
  --pf-warn:     #c97441;   /* fast voll — orange */
  --pf-full:     #8a8278;   /* voll — neutral gray */
  --pf-danger:   #b54545;   /* error / abgelehnt */
  --pf-online:   #5fae5f;   /* online dot */

  /* -------- Glass surfaces --------
     Three intensities. Always paired with backdrop-filter blur+saturate. */
  --pf-glass-1: rgba(255, 251, 245, 0.55);   /* base card */
  --pf-glass-2: rgba(255, 251, 245, 0.72);   /* elevated card */
  --pf-glass-3: rgba(255, 251, 245, 0.88);   /* modal / popover */
  --pf-glass-tint: rgba(184, 90, 54, 0.05);  /* warm tint overlay */
  --pf-glass-border: rgba(255, 255, 255, 0.55);
  --pf-glass-border-inner: rgba(255, 255, 255, 0.85);
  --pf-glass-shadow:
    0 1px 0 0 rgba(255,255,255,0.8) inset,
    0 -1px 0 0 rgba(0,0,0,0.04) inset,
    0 8px 32px -8px rgba(58, 32, 18, 0.18),
    0 24px 48px -16px rgba(58, 32, 18, 0.10);
  --pf-glass-shadow-hover:
    0 1px 0 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 0 rgba(0,0,0,0.04) inset,
    0 12px 40px -8px rgba(58, 32, 18, 0.24),
    0 32px 60px -16px rgba(58, 32, 18, 0.14);
  --pf-blur: 24px;
  --pf-blur-strong: 36px;

  /* -------- Typography -------- */
  --pf-font-display: "Fraunces", "Cormorant Garamond", Georgia, serif;
  --pf-font-body: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pf-font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  --pf-text-xs:   12px;
  --pf-text-sm:   13px;
  --pf-text-base: 15px;
  --pf-text-md:   17px;
  --pf-text-lg:   20px;
  --pf-text-xl:   26px;
  --pf-text-2xl:  34px;
  --pf-text-3xl:  44px;
  --pf-text-4xl:  60px;

  --pf-leading-tight: 1.15;
  --pf-leading-snug: 1.3;
  --pf-leading-normal: 1.5;

  --pf-tracking-tight: -0.02em;
  --pf-tracking-display: -0.025em;
  --pf-tracking-wide: 0.08em;

  /* -------- Spacing (4px base) -------- */
  --pf-1: 4px;
  --pf-2: 8px;
  --pf-3: 12px;
  --pf-4: 16px;
  --pf-5: 20px;
  --pf-6: 24px;
  --pf-7: 32px;
  --pf-8: 40px;
  --pf-9: 56px;
  --pf-10: 72px;

  /* -------- Radii -------- */
  --pf-r-sm:   8px;
  --pf-r-md:  14px;
  --pf-r-lg:  20px;
  --pf-r-xl:  28px;
  --pf-r-2xl: 36px;
  --pf-r-pill: 999px;

  /* -------- Motion -------- */
  --pf-ease: cubic-bezier(.2, .7, .3, 1);
  --pf-ease-out: cubic-bezier(.16, 1, .3, 1);
  --pf-dur-fast: 140ms;
  --pf-dur: 220ms;
  --pf-dur-slow: 360ms;
}

/* =======================================================================
   Dark mode tokens — invoked via .pf-dark on the screen root
   ======================================================================= */
.pf-dark {
  --pf-ink-900: #f4ece0;
  --pf-ink-700: #c9bfb0;
  --pf-ink-500: #8a7e6e;
  --pf-ink-300: #5a5043;

  --pf-cream-50:  #1a1410;
  --pf-cream-100: #221a14;
  --pf-cream-200: #2c241c;
  --pf-cream-300: #3a3127;

  --pf-glass-1: rgba(40, 28, 20, 0.55);
  --pf-glass-2: rgba(40, 28, 20, 0.72);
  --pf-glass-3: rgba(28, 20, 14, 0.88);
  --pf-glass-tint: rgba(217, 152, 120, 0.06);
  --pf-glass-border: rgba(255, 240, 220, 0.10);
  --pf-glass-border-inner: rgba(255, 240, 220, 0.06);
  --pf-glass-shadow:
    0 1px 0 0 rgba(255,240,220,0.06) inset,
    0 -1px 0 0 rgba(0,0,0,0.3) inset,
    0 8px 32px -8px rgba(0, 0, 0, 0.5),
    0 24px 48px -16px rgba(0, 0, 0, 0.4);
}

/* =======================================================================
   Base reset within .pf-screen
   Each "screen" mock lives inside .pf-screen so we can scope without
   touching the design canvas chrome.
   ======================================================================= */
.pf-screen {
  font-family: var(--pf-font-body);
  font-size: var(--pf-text-base);
  color: var(--pf-ink-900);
  line-height: var(--pf-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";
}
.pf-screen *,
.pf-screen *::before,
.pf-screen *::after {
  box-sizing: border-box;
}
.pf-screen h1, .pf-screen h2, .pf-screen h3, .pf-screen h4 {
  font-family: var(--pf-font-display);
  font-weight: 460;
  letter-spacing: var(--pf-tracking-display);
  line-height: var(--pf-leading-tight);
  margin: 0;
  color: var(--pf-ink-900);
}
.pf-screen p { margin: 0; }
.pf-screen button { font-family: inherit; }

/* =======================================================================
   Glass utility — applied via .pf-glass / .pf-glass-strong
   ======================================================================= */
.pf-glass {
  background: var(--pf-glass-1);
  backdrop-filter: blur(var(--pf-blur)) saturate(140%);
  -webkit-backdrop-filter: blur(var(--pf-blur)) saturate(140%);
  border: 1px solid var(--pf-glass-border);
  box-shadow: var(--pf-glass-shadow);
  border-radius: var(--pf-r-lg);
}
.pf-glass-strong {
  background: var(--pf-glass-2);
  backdrop-filter: blur(var(--pf-blur-strong)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--pf-blur-strong)) saturate(150%);
  border: 1px solid var(--pf-glass-border);
  box-shadow: var(--pf-glass-shadow);
  border-radius: var(--pf-r-lg);
}
.pf-glass-modal {
  background: var(--pf-glass-3);
  backdrop-filter: blur(var(--pf-blur-strong)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--pf-blur-strong)) saturate(160%);
  border: 1px solid var(--pf-glass-border);
  box-shadow: var(--pf-glass-shadow);
  border-radius: var(--pf-r-xl);
}

/* =======================================================================
   Photo background helper: gives a soft gradient overlay so glass cards
   stay readable even on busy autumn-foliage shots.
   ======================================================================= */
.pf-photo-bg {
  position: relative;
  background-size: cover;
  background-position: center;
  isolation: isolate;
}
.pf-photo-bg::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,247,237,0.0) 0%, rgba(255,247,237,0.45) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(255,247,237,0.15), rgba(255,247,237,0));
  z-index: -1;
}
.pf-dark.pf-photo-bg::before,
.pf-dark .pf-photo-bg::before {
  background:
    linear-gradient(180deg, rgba(20,12,8,0.20) 0%, rgba(20,12,8,0.65) 100%),
    radial-gradient(120% 80% at 50% 0%, rgba(20,12,8,0.20), rgba(20,12,8,0));
}