/* ============================================================
   Floramics — Design tokens
   8px grid · rem-based · consistent spacing/type/radius
   ============================================================ */

:root {
  /* Spacing scale (8px grid; 4px half-step allowed for icons/badges) */
  --space-half: 0.25rem;   /*  4px */
  --space-1:    0.5rem;    /*  8px */
  --space-2:    1rem;      /* 16px */
  --space-3:    1.5rem;    /* 24px */
  --space-4:    2rem;      /* 32px */
  --space-5:    2.5rem;    /* 40px */
  --space-6:    3rem;      /* 48px */
  --space-7:    3.5rem;    /* 56px */
  --space-8:    4rem;      /* 64px */
  --space-10:   5rem;      /* 80px */
  --space-12:   6rem;      /* 96px */
  --space-14:   7rem;      /* 112px */
  --space-16:   8rem;      /* 128px */

  /* Typography scale */
  --text-xs:    0.6875rem; /* 11px — mono labels, captions */
  --text-sm:    0.8125rem; /* 13px — small text */
  --text-base:  0.875rem;  /* 14px — body small / UI text */
  --text-md:    1rem;      /* 16px — body */
  --text-lg:    1.125rem;  /* 18px — lede small / channel value */
  --text-xl:    1.375rem;  /* 22px — h-card, brand-name */
  --text-2xl:   1.5rem;    /* 24px — h3 */
  --text-3xl:   1.75rem;   /* 28px — marquee */
  --text-4xl:   2.25rem;   /* 36px */
  --text-display-lede: clamp(1.25rem, 2vw, 1.625rem);
  --text-display-md:   clamp(2.25rem, 4.6vw, 4.25rem);   /* h-section */
  --text-display-lg:   clamp(3rem,   7.5vw, 6rem);       /* h-display */
  --text-quote:        clamp(1.75rem, 3vw, 2.75rem);

  /* Line heights */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.55;
  --leading-relaxed: 1.65;
  --leading-display: 0.96;

  /* Border radius */
  --radius-sm:   0.25rem;   /*  4px */
  --radius-md:   0.5rem;    /*  8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-full: 9999px;

  /* Layout */
  --container: 77.5rem;     /* 1240px */
  --gutter: clamp(1.25rem, 4vw, 3.5rem);   /* 20–56px */
  --section-gap: clamp(var(--space-10), 10vw, var(--space-16));   /* 80–128px */
  --block-gap:   var(--space-7);   /* 56px between blocks */
  --content-gap: var(--space-3);   /* 24px between elements */
  --grid-gap:    var(--space-3);   /* 24px between grid items */

  /* Buttons (heights aligned with input height) */
  --btn-sm-height: 2rem;     /* 32px */
  --btn-md-height: 2.5rem;   /* 40px */
  --btn-lg-height: 3rem;     /* 48px */

  /* Transitions */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 320ms;
  --duration-scroll: 720ms;
  --ease-default: cubic-bezier(0.2, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0, 0, 0.2, 1);
  --ease-soft:    cubic-bezier(0.22, 1, 0.36, 1);

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(15, 53, 34, 0.04);
  --shadow-sm: 0 2px 6px rgba(15, 53, 34, 0.06);
  --shadow-md: 0 8px 24px rgba(15, 53, 34, 0.08);
  --shadow-lg: 0 16px 40px rgba(15, 53, 34, 0.10);
  --shadow-hover: 0 20px 36px -12px rgba(15, 53, 34, 0.18);
  --shadow-focus: 0 0 0 3px rgba(38, 122, 78, 0.25);

  /* Focus / form-state */
  --focus-outline: 2px solid var(--green-deep, #1B5236);
  --field-bg-focus: rgba(38, 122, 78, 0.04);

  /* Icon sizes */
  --icon-sm: 0.75rem;        /* 12px */
  --icon-md: 1rem;            /* 16px */
  --icon-lg: 1.25rem;         /* 20px */

  /* Semantic ink shades */
  --ink-quiet: #6A7670;       /* tertiary labels, replaces accent for cat-row-meta */

  /* Status / feedback */
  --error:        #B23A1F;
  --error-bg:     rgba(178, 58, 31, 0.06);

  /* Z-index */
  --z-base:    1;
  --z-sticky:  50;
  --z-overlay: 80;
  --z-modal:  100;
}

/* Mobile root font-size: scale the entire system by setting root smaller */
@media (max-width: 600px) {
  :root {
    font-size: 14px;
  }
}

/* ============================================================
   Scroll animations
   IntersectionObserver toggles [data-animate-in] on visible items.
   Animates opacity + transform only; respects reduced-motion.
   ============================================================ */

/* Scroll-reveal motion is kept short and shallow:
   12px lift, 500ms, ease-out. Long-distance or slow-start curves
   produced visible jank when multiple elements crossed the viewport
   threshold during fast scrolling. */

[data-animate] {
  opacity: 0;
  transform: translateY(0.75rem);     /* 12px lift (was 24px) */
  transition:
    opacity 500ms var(--ease-out),
    transform 500ms var(--ease-out);
  /* will-change is applied just-in-time by app.js right before each
     element animates in — pre-creating 38 GPU layers on page load was
     burning memory and triggering layout thrash. */
}

[data-animate="fade"] {
  transform: none;
}

[data-animate="left"] {
  transform: translateX(-0.75rem);
}

[data-animate="right"] {
  transform: translateX(0.75rem);
}

[data-animate-in] {
  opacity: 1;
  transform: none;
}

/* ---------------------------------------------------------------
   Cross-document View Transitions (MPA navigation)
   Native crossfade between PHP pages. Browser-supported in Chrome
   126+ / Safari 18+ / Edge. Gracefully ignored elsewhere.
   --------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 280ms;
  animation-timing-function: var(--ease-out);
}

/* Default — symmetrical fade for browsers without direction class */
::view-transition-old(root) { animation-name: fl-fade-out; }
::view-transition-new(root) { animation-name: fl-fade-in; }

@keyframes fl-fade-out { to   { opacity: 0; } }
@keyframes fl-fade-in  { from { opacity: 0; } }

/* Direction-aware transitions — JS adds .vt-forward / .vt-backward
   to <html> before navigation (and re-applies on the new page via
   inline script in <head>). Forward = deeper in nav order. */
html.vt-forward::view-transition-old(root)  { animation-name: fl-slide-out-left; }
html.vt-forward::view-transition-new(root)  { animation-name: fl-slide-in-right; }
html.vt-backward::view-transition-old(root) { animation-name: fl-slide-out-right; }
html.vt-backward::view-transition-new(root) { animation-name: fl-slide-in-left; }

@keyframes fl-slide-out-left  { to   { opacity: 0; transform: translateX(-1.5rem); } }
@keyframes fl-slide-out-right { to   { opacity: 0; transform: translateX(1.5rem); } }
@keyframes fl-slide-in-right  { from { opacity: 0; transform: translateX(1.5rem); } }
@keyframes fl-slide-in-left   { from { opacity: 0; transform: translateX(-1.5rem); } }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}