/* Chrome Botany — visual tokens for weedbuddy.
 * Import from this folder, or update asset URLs when integrating.
 * This stylesheet does not implement routing, components or data access.
 */

@font-face {
  font-family: "WB Anton";
  src: url("../fonts/Anton-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "WB DM Sans";
  src: url("../fonts/DMSans-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
}

:root {
  --wb-bg: #111311;
  --wb-surface: #1a1d18;
  --wb-lime: #d7ff3f;
  --wb-lime-hover: #e2ff75;
  --wb-lime-active: #c3eb29;
  --wb-text: #f5f5ec;
  --wb-muted: #b7bdb1;
  --wb-border: #43493f;
  --wb-control-border: #b7bdb1;
  --wb-backdrop: rgba(0, 0, 0, 0.72);

  --wb-font-display: "WB Anton", Impact, "Arial Narrow", sans-serif;
  --wb-font-body: "WB DM Sans", system-ui, sans-serif;
  --wb-text-label: 12px;
  --wb-text-small: 14px;
  --wb-text-body: 16px;
  --wb-text-section: 28px;
  --wb-text-display: clamp(76px, 10vw, 144px);
  --wb-leading-body: 1.5;
  --wb-leading-display: 0.96;
  --wb-tracking-display: -0.025em;
  --wb-tracking-label: 0.1em;

  --wb-space-1: 4px;
  --wb-space-2: 8px;
  --wb-space-3: 12px;
  --wb-space-4: 16px;
  --wb-space-5: 20px;
  --wb-space-6: 24px;
  --wb-space-8: 32px;
  --wb-space-10: 40px;
  --wb-space-12: 48px;
  --wb-space-16: 64px;
  --wb-space-20: 80px;
  --wb-space-24: 96px;

  --wb-content-max: 1440px;
  --wb-page-gutter: 48px;
  --wb-header-height: 80px;
  --wb-touch-min: 48px;
  --wb-card-image-ratio: 16 / 10;
  --wb-radius-image: 0px;
  --wb-radius-control: 4px;
  --wb-radius-avatar: 50%;
  --wb-shadow: none;
  --wb-dialog-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
  --wb-focus-ring: 2px solid #d7ff3f;
  --wb-focus-offset: 4px;

  --wb-duration-fast: 140ms;
  --wb-duration-base: 180ms;
  --wb-duration-image: 220ms;
  --wb-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wb-hover-image-scale: 1.025;
  --wb-panel-enter-offset: 8px;
  --wb-scroll-behavior: smooth;
}

/* Zwischenbreiten 1024–1199 px: „DEIN EIGENER“ muss in die 52%-Spalte passen, ohne zu überlaufen */
@media (min-width: 1024px) and (max-width: 1199px) {
  :root {
    --wb-text-display: clamp(76px, 9.2vw, 144px);
  }
}

@media (max-width: 1023px) {
  :root {
    --wb-page-gutter: 32px;
    --wb-header-height: 64px;
    --wb-text-display: clamp(88px, 12vw, 120px);
  }
}

@media (max-width: 767px) {
  :root {
    --wb-page-gutter: 20px;
    --wb-text-section: 24px;
    --wb-text-display: clamp(48px, 19.5vw, 76px);
    --wb-leading-display: 0.98;
  }
}

@media (max-width: 359px) {
  :root {
    --wb-text-display: clamp(48px, 15.6vw, 56px);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --wb-duration-fast: 0ms;
    --wb-duration-base: 0ms;
    --wb-duration-image: 0ms;
    --wb-hover-image-scale: 1;
    --wb-panel-enter-offset: 0px;
    --wb-scroll-behavior: auto;
  }
}