/* Mirasoles: Foundation */

:root {
  /* Brand colors */
  --color-primary: #39ac4a;
  --color-primary-strong: #2f8f3d;
  --color-primary-soft: rgba(57, 172, 74, 0.12);
  --color-primary-subtle: rgba(57, 172, 74, 0.08);
  --color-primary-muted: rgba(57, 172, 74, 0.18);
  --color-primary-focus: rgba(57, 172, 74, 0.28);

  /* Neutral colors */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-text: #111111;
  --color-text-strong: #182127;
  --color-text-deep: #17211d;
  --color-text-muted: rgba(17, 17, 17, 0.7);
  --color-text-soft: rgba(17, 17, 17, 0.5);
  --color-surface: #ffffff;
  --color-surface-subtle: #f8faf8;
  --color-surface-muted: #f3f5f4;

  /* Borders and states */
  --color-border: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.2);
  --color-border-subtle: rgba(17, 17, 17, 0.08);
  --color-border-muted: rgba(17, 17, 17, 0.1);
  --color-border-emphasis: rgba(17, 17, 17, 0.12);
  --color-success: #1f6f2e;
  --color-danger: #be2424;
  --color-header-bg: rgba(0, 0, 0, 0.01);
  --color-header-border: rgba(255, 255, 255, 0.18);
  --color-header-light-border: rgba(0, 0, 0, 0.08);
  --color-footer-bg: #0b0d0c;
  --color-footer-border: rgba(255, 255, 255, 0.14);
  --color-surface-green-light: #dfeedd;
  --product-image-backdrop: radial-gradient(circle at top, rgba(255, 255, 255, 0.96) 0%, rgba(243, 248, 240, 0.96) 56%, rgba(232, 239, 231, 0.96) 100%);

  /* Typography */
  --font-heading: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-h1: 54px;
  --font-size-h2: 45px;
  --font-size-h3: 36px;
  --font-size-body: 18px;
  --line-heading: 1.2;
  --line-body: 1.55;

  /* Layout */
  --container-max: 1200px;
  --space-page: clamp(16px, 3.2vw, 36px);
  --space-section: clamp(34px, 6vw, 84px);
  --space-card: clamp(16px, 2.2vw, 24px);
  --header-height: 60px;
  --history-stage-top: calc(var(--header-height) + clamp(8px, 3vh, 28px));
  --history-stage-bottom-gap: clamp(18px, 4.5vh, 44px);

  /* Shape + elevation */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 14px 28px rgba(0, 0, 0, 0.1);

  /* Transition */
  --ease: 180ms ease;

}

@keyframes productMediaDotPulse {
  0%,
  100% {
    transform: scale(1.18);
  }

  50% {
    transform: scale(1.34);
  }
}

@keyframes productMediaDotRing {
  0% {
    opacity: 0;
    transform: scale(0.45);
  }

  35% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
    transform: scale(1.65);
  }
}

@keyframes portalTimelineHydrateFill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes portalTimelineHydrateDot {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes portalTimelineHydrateDotCurrent {
  from {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes portalTimelineHydrateLabel {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 700px) {
:root {
    --header-height: 56px;
  }
}

@keyframes quote-row-flash {
  0% {
    background: var(--color-primary-subtle);
    box-shadow: inset 0 0 0 1px rgba(57, 172, 74, 0.2);
  }
  100% {
    background: transparent;
    box-shadow: none;
  }
}

@keyframes quick-order-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes products-category-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes products-category-shimmer {
  from {
    background-position: -100% 0;
  }

  to {
    background-position: 100% 0;
  }
}