/* ============================================
   RENATUS SPACING TOKENS
   Based on Figma Design System 2026
   ============================================ */

:root {
  /* Base spacing scale */
  --spacing-0: 0;
  --spacing-1: 0.25rem;   /* 4px */
  --spacing-2: 0.5rem;    /* 8px */
  --spacing-3: 0.75rem;   /* 12px */
  --spacing-4: 1rem;      /* 16px */
  --spacing-5: 1.25rem;   /* 20px */
  --spacing-6: 1.5rem;    /* 24px */
  --spacing-8: 2rem;      /* 32px */
  --spacing-10: 2.5rem;   /* 40px */
  --spacing-12: 3rem;     /* 48px */
  --spacing-16: 4rem;     /* 64px */
  --spacing-20: 5rem;     /* 80px */
  --spacing-24: 6rem;     /* 96px */

  /* Shorthand aliases */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* Semantic spacing aliases */
  --spacing-2xs: 0.125rem;  /* 2px */
  --spacing-xs: var(--spacing-1);
  --spacing-sm: var(--spacing-2);
  --spacing-md: var(--spacing-4);
  --spacing-lg: var(--spacing-6);
  --spacing-xl: var(--spacing-8);
  --spacing-2xl: var(--spacing-10);
  --spacing-3xl: var(--spacing-12);

  /* Component-specific spacing */
  --spacing-section: var(--spacing-12);
  --spacing-card: var(--spacing-6);
  --spacing-input: var(--spacing-4);

  /* Figma-specific spacing */
  --section-padding-x: 140px;
  --section-gap: 30px;
  --tab-padding-x: 20px;
  --tab-padding-y: 10px;
  --pill-container-padding: 4px;
  --pill-container-gap: 2px;
  --pill-tab-padding-x: 28px;
  --pill-tab-padding-y: 0;
  --btn-height-md: 62px;

  /* Landing container */
  --landing-container: 1425px;
  --landing-container-padding: 60px;

  /* Layout-specific values */
  --preview-panel-height: 460px;
  --navbar-height: 110px;
  --container-max-width: 87.5rem;
  --card-image-height: 2.8125rem;
  --card-min-height: 17.5rem;
  --card-min-width: 12.5rem;
  --card-max-width: 20rem;
  --panel-radius: 3.125rem;

  /* Thumbnail dimensions */
  --thumbnail-width: 5rem;
  --thumbnail-height: 3.75rem;
  --thumbnail-width-sm: 4.375rem;
  --thumbnail-height-sm: 3.25rem;

  /* Icon sizes */
  --icon-size-sm: 1rem;
  --icon-size-md: 1.25rem;
  --icon-size-lg: 1.5rem;
  --icon-size-check: 22px;
  --icon-size-faq: 24px;
  --icon-size-starter: 28px;
  --icon-size-starter-svg: 14px;
  --chat-avatar-size: 40px;
  --chat-status-dot: 8px;
  --chat-close-size: 28px;
  --chat-close-icon: 16px;

  /* Hero report card */
  --hero-card-width: 380px;
  --hero-card-width-tablet: 320px;
  --hero-bar-label-width: 120px;
  --hero-bar-height: 8px;
  --hero-bar-value-width: 32px;
  --hero-momentum-size: 100px;
  --hero-momentum-border: 6px;
  --hero-card-img-size: 200px;

  /* Content widths */
  --content-max-width: 1425px;

  /* Pricing page - Figma specs */
  --pricing-card-width: 323px;
  --pricing-card-container: 1039px;
  --pricing-cta-width: 218px;
  --pricing-cta-height: 46px;
  --pricing-input-width: 253px;
  --pricing-card-gap: 35px;
  --pricing-card-padding-y: 27px;
  --pricing-card-internal-gap: 5px;
  --pricing-spacer-height-lg: 80px;
  --pricing-spacer-height-sm: 39px;
  --pricing-sub-card-min-height: 560px;
  --pricing-feature-width: 250px;
  --pricing-cta-wrap-padding: 15px;
  --pricing-stripe-badge-height: 120px;
}