/* Design tokens — see Documentation/Context.md §8 */
:root {

  /* Shades */
  --color-black: #13181a;
  --color-black-opacity: rgba(19, 24, 26, 0.2);
  /* Figma Pitch Black — deep backdrop (e.g. homepage social illustration) */
  --color-pitch-black: #010102;
  --color-light-black: #2d373b;
  /* Meets 4.5:1 on --color-bg (#fafdfc) for normal body text (WCAG AA) */
  --color-dark-grey: #52636a;
  --color-natural-grey: #d1d9dc;
  --color-light-grey: #e9eef0;
  --color-light-grey-opacity: rgba(233, 238, 240, 0.5);
  --color-white: #ffffff;
  --color-bg: #fafdfc;

  /* Light Colors */
  --color-green: #def1c0;
  --color-cyan-light: #c7ebf2;
  --color-cyan-light-opacity: rgba(199, 235, 242, 0.5);
  --color-blue: #c1d6f1;
  --color-pink: #ddc7e3;

  /* Dark Colors */
  --color-green-dark: #a2b881;
  --color-cyan: #96c4cc;
  --color-blue-dark: #94accc;
  --color-pink-dark: #ad8fb6;

  /* Installments + monthly-load pages: interactive glass preview card (shared shell) */
  --dynamic-preview-card-radius: clamp(28px, 4vw, 38px);
  --dynamic-preview-card-shadow: 0 0 clamp(40px, 5vw, 54px) rgba(0, 0, 0, 0.25);
  --dynamic-preview-glass-bg: rgba(199, 235, 242, 0.64);
  --dynamic-preview-glass-bg-hover: rgba(232, 248, 251, 0.88);
  
  --radius-card: 12px;
  --radius-inner: 7px;
  /* Navbar mega-menu outer panel (ul.navbar__dropdown) */
  --radius-dropdown-panel: 40px;
  /* Grey promo card shell (.navbar__dropdown-card-item / .navbar__dropdown-card) */
  --radius-dropdown-card: 25px;
  --radius-dropdown-img: 16px;
  --padding: 16px;
  /* Desktop mega-menu: `left`/`right` inset on `.navbar__dropdown` + `margin-top` gap under the bar (same value) */
  --navbar-dropdown-margin-inline: var(--padding);
  /* Grey card shell: only this rule sets inner inset (link has padding: 0). */
  --padding-dropdown-card: var(--padding);
  --max-width: 1440px;
  --max-width-wide: 1920px;
  --font-body: 16px;
  --font-button: 20px;
  --font-subtitle: 18px;
  --font-title: 24px;
  --font-display: 72px;
  --font-main: 32px;
  --font-main-sm: 26px;
  --font-nav-mobile: 22px;
  --font-smallest: 12px;
  --transition: 0.2s ease;
  /* Mobile accordion: max-height needs a slightly longer duration than opacity-only */
  /* Mobile accordion: gentle open/close (single max-height transition) */
  --transition-dropdown-mobile: 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  /* Category columns: staggered slide-up + fade when mega-menu opens */
  --nav-category-enter-duration: 0.42s;
  --nav-category-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-category-enter-shift: 14px;
  --nav-category-stagger: 0.058s;
  --nav-category-base-delay: 0.07s;
  --dropdown-card-hover-lift: 5px;
  --dropdown-card-img-hover-scale: 1.06;
  /* Mobile overlay menu: compact promo card */
  --dropdown-card-img-height-mobile: 140px;
  --dropdown-card-gap-mobile: 8px;
  /* Primary CTA (e.g. navbar הורדה): cursor-follow glow + hover scale */
  --cta-hover-scale: 1.025;
  --cta-glow-size: 280px;
  --cta-transition: 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  /* Navbar: matches .navbar__inner vertical padding (2×) + min-height */
  --navbar-height: 132px;
  --navbar-scroll-hide-duration: 0.4s;
  --navbar-scroll-hide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Hero: always at least one viewport tall (no fixed px floor — that caused scroll on 1080p) */
  --hero-min-height: 1200px;
  --hero-min-height-fill: 100svh;
  --hero-padding-y: 60px;
  /* Tight stack: reviews, headline, subtitle, CTAs (inside .hero__intro) */
  --hero-stack-gap: 20px;
  /* Only the gap between .hero__intro and .hero__balance — looser to offset smaller .hero__wallet padding */
  --hero-intro-balance-gap: 44px;
  --font-hero-display: clamp(2.75rem, 5vw + 1.75rem, 7.5rem);
  --font-hero-display-leading: 1.05;
  --font-hero-display-tracking: -0.05em;

  /* Homepage: same vertical padding between calculator, brief, features, KPI, currencies, social */
  --section-stack-padding-y: clamp(56px, 8vw, 100px);

  /* Homepage KPI / stats strip — Figma 472:13411 */
  --section-kpi-inner-gap: 20px;
  --section-kpi-blocks-gap: clamp(48px, 7vw, 80px);
  --section-kpi-grid-gap: 12px;
  --section-kpi-card-min-h: 200px;
  --section-kpi-card-radius: var(--radius-dropdown-card);
  --section-kpi-shader-max-w: 664px;
  --section-kpi-shader-min-h: min(50vw, 420px);
  --gradient-kpi-card-a: linear-gradient(146deg, var(--color-pink) 1.98%, var(--color-green) 98.02%);
  --gradient-kpi-card-b: linear-gradient(146deg, var(--color-blue) 1.98%, var(--color-pink) 98.02%);
  --gradient-kpi-card-c: linear-gradient(146deg, var(--color-cyan-light) 1.98%, var(--color-blue) 98.02%);
  --gradient-kpi-card-d: linear-gradient(146deg, var(--color-green) 1.98%, var(--color-cyan-light) 98.02%);
  --gradient-kpi-card-e: linear-gradient(146deg, var(--color-cyan-light) 1.98%, var(--color-pink) 98.02%);
  /* Features cards: icon plate hover (45° — cycle 1→4 on .features-card__icon-shell--hover-n) */
  --gradient-features-icon-hover-1: linear-gradient(45deg, var(--color-green), var(--color-cyan-light));
  --gradient-features-icon-hover-2: linear-gradient(45deg, var(--color-cyan-light), var(--color-blue));
  --gradient-features-icon-hover-3: linear-gradient(45deg, var(--color-blue), var(--color-pink));
  --gradient-features-icon-hover-4: linear-gradient(45deg, var(--color-pink), var(--color-green));
  --kpi-card-enter-duration: 0.7s;
  --kpi-card-enter-stagger: 0.09s;
  --kpi-card-enter-shift: 14px;
  --kpi-card-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --kpi-card-hover-scale: 1.022;
  --kpi-card-hover-duration: 0.42s;
  --section-kpi-reviews-gap: 12px;
  --kpi-reviews-pagination-gap: 8px;
  --kpi-review-slide-max-w: 700px;
  --kpi-review-slide-min-h: 200px;
  --kpi-reviews-dot-size: 10px;
  --kpi-reviews-dot-active-w: 50px;
  --kpi-reviews-dot-gap: 5px;
  --kpi-reviews-auto-ms: 5500;

  /* Homepage brief (Section 2) — Figma 472:13298 */
  --color-section-brief-bg: #0c0c0c;
  --section-brief-column-gap: 45px;
  --section-brief-stack-gap: 20px;
  --section-brief-copy-max: 694px;
  --section-brief-media-width: 600px;
  --section-brief-media-height: 800px;
  /* Display title gradient (angle + stops match Figma export) */
  --gradient-brief-title: linear-gradient(
    -16.86deg,
    var(--color-green) 22.65%,
    var(--color-cyan-light) 39.45%,
    var(--color-blue) 60.36%,
    var(--color-pink) 90.51%
  );

  /* Social icon row (footer + homepage social section) — same hit target as Figma Social_Media_List */
  --social-link-hit: 40px;
  --social-link-icon-size: 26px;
  --social-link-gap: 12px;
  --social-link-bg: rgba(250, 253, 252, 0.08);
  --social-link-bg-hover: rgba(250, 253, 252, 0.16);
  --social-link-focus-outline: var(--color-bg);

  /* Homepage social shoutout - Figma 1194:26454; Social_Section/SocialImage_XX.webp collage */
  --color-section-social-bg: var(--color-pitch-black);
  --section-social-column-gap: clamp(28px, 4vw, 45px);
  --section-social-stack-gap: 20px;
  --section-social-copy-max: 640px;
  --section-social-media-max-w: min(600px, 52vw);
  /* Inner min-height synced from #currencies in js/social-section.js; fallback ≈ currencies collapsed */
  --section-social-inner-min-h: clamp(500px, 46vw, 620px);
  --social-collage-enter-ms: 900ms;
  --social-collage-exit-ms: 700ms;
  --social-collage-card-radius: var(--radius-dropdown-card);
  --social-collage-card-border: 4px;
  --social-collage-card-padding: 3px;
  --social-collage-img-radius: calc(
    var(--social-collage-card-radius) - var(--social-collage-card-border) - var(--social-collage-card-padding)
  );

  /* Homepage QR / download finale — photo path is in `css/pages/index/section-qr.css` (reliable `url()` resolution) */
  /* Soft brand tint over photo (photo stays dominant) */
  --gradient-section-qr-backdrop-overlay: linear-gradient(
    162deg,
    rgba(193, 214, 241, 0.42) 0%,
    rgba(221, 199, 227, 0.38) 52%,
    rgba(173, 143, 181, 0.4) 100%
  );
  --gradient-section-qr-backdrop: linear-gradient(
    162deg,
    var(--color-blue) 0%,
    var(--color-pink) 51%,
    var(--color-pink-dark) 100%
  );
  /* Box stroke: matches Figma linear stroke (green → cyan → blue → pink) */
  --gradient-section-qr-box-stroke: linear-gradient(
    125deg,
    var(--color-green) 0%,
    var(--color-cyan-light) 25%,
    var(--color-blue) 56%,
    var(--color-pink) 100%
  );
  /* Input field stroke — Figma Input 307:8449 (dark brand stops) */
  --gradient-laya-field-border: linear-gradient(
    125deg,
    var(--color-green-dark) 0%,
    var(--color-cyan) 25%,
    var(--color-blue-dark) 56%,
    var(--color-pink-dark) 100%
  );
  --section-qr-box-max-w: min(100%, 1408px);
  --section-qr-box-padding: clamp(40px, 6vw, 100px);
  --section-qr-box-gap: clamp(28px, 4vw, 45px);
  --section-qr-box-stroke-w: 5px;
  --section-qr-qr-radius: 16px;
  --section-qr-qr-gap: 6px;
  --section-qr-store-gap: clamp(10px, 2vw, 14px);
  --section-qr-title-max: 1208px;

  /* Sticky help widget — Figma AssistButton 630:14812 */
  --help-widget-panel-width: 300px;
  --help-widget-intro-delay: 1s;
  --help-widget-enter-duration: 0.55s;
  --help-widget-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --help-widget-drawer-duration: 0.42s;
  --help-widget-drawer-ease: cubic-bezier(0.33, 1, 0.68, 1);
}