/* ==========================================================================
   SERENA HEALTH - CSS DESIGN TOKENS
   Generated at Eleventy build time from storefront-src/_data/tenant.js
   DO NOT EDIT public/storefront/css/variables.css directly.
   Source: storefront-src/css/variables.njk
   ========================================================================== */

:root {
  /* ==========================================================================
     1. COLOR SYSTEM — Brand colors from tenant configuration
     ========================================================================== */

  /* Primary Gradient Colors */
  --color-primary-pink: #E91E8C;
  --color-primary-purple: #7B3F9D;
  --color-primary-blue: #0047BB;

  /* Primary Gradient */
  --gradient-primary: linear-gradient(135deg, #E91E8C 0%, #7B3F9D 50%, #0047BB 100%);
  --gradient-primary-horizontal: linear-gradient(90deg, #E91E8C 0%, #7B3F9D 50%, #0047BB 100%);
  --gradient-primary-vertical: linear-gradient(180deg, #E91E8C 0%, #7B3F9D 50%, #0047BB 100%);

  /* Accent Colors */
  --color-accent-pink: #E91E8C;
  --color-accent-purple: #7B3F9D;
  --color-accent-blue: #0047BB;

  /* Accent Colors - Light Variants */
  --color-accent-pink-light: #F9E1EF;
  --color-accent-purple-light: #EDE6F2;
  --color-accent-blue-light: #E6EEF8;

  /* Accent Colors - Dark Variants */
  --color-accent-pink-dark: #B8177A;
  --color-accent-purple-dark: #5E2F78;
  --color-accent-blue-dark: #003691;

  /* Neutral Colors */
  --color-cream: #fefdfb;
  --color-white: #ffffff;
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;
  --color-black: #000000;

  /* Semantic Colors - Success */
  --color-success: #22c55e;
  --color-success-light: #dcfce7;
  --color-success-dark: #15803d;

  /* Semantic Colors - Warning */
  --color-warning: #f97316;
  --color-warning-light: #ffedd5;
  --color-warning-dark: #c2410c;

  /* Semantic Colors - Error */
  --color-error: #ef4444;
  --color-error-light: #fee2e2;
  --color-error-dark: #b91c1c;

  /* Semantic Colors - Info */
  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #1d4ed8;

  /* Background Colors */
  --color-bg-primary: var(--color-cream);
  --color-bg-secondary: var(--color-white);
  --color-bg-tertiary: var(--color-gray-50);
  --color-background: var(--color-cream);          /* Alias: used by 12+ selectors */

  /* Text Colors */
  --color-text-primary: var(--color-gray-900);
  --color-text-secondary: var(--color-gray-600);
  --color-text-tertiary: var(--color-gray-500);
  --color-text-inverse: var(--color-white);

  /* Border Colors */
  --color-border-light: var(--color-gray-200);
  --color-border-default: var(--color-gray-300);
  --color-border-dark: var(--color-gray-400);

  /* ==========================================================================
     2. TYPOGRAPHY SYSTEM
     ========================================================================== */

  /* Font Families */
  --font-family-heading: 'Playfair Display', Georgia, serif;
  --font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-family-label: 'Montserrat', 'Inter', sans-serif;

  /* Font Sizes */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-md: 1.125rem;     /* 18px */
  --font-size-lg: 1.25rem;      /* 20px */
  --font-size-xl: 1.5rem;       /* 24px */
  --font-size-2xl: 1.875rem;    /* 30px */
  --font-size-3xl: 2.25rem;     /* 36px */
  --font-size-4xl: 3rem;        /* 48px */

  /* Line Heights */
  --line-height-tight: 1.2;     /* Headings */
  --line-height-normal: 1.5;    /* Default */
  --line-height-relaxed: 1.6;   /* Body text */
  --line-height-loose: 1.8;     /* Long-form content */

  /* Font Weights */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-regular: var(--font-weight-normal); /* Alias: used by price period text */

  /* Letter Spacing */
  --letter-spacing-tight: -0.025em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.025em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest: 0.1em;

  /* ==========================================================================
     3. SPACING SYSTEM (8px base unit)
     ========================================================================== */

  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.25rem;       /* 4px */
  --spacing-1: 0.5rem;          /* 8px */
  --spacing-1-5: 0.75rem;       /* 12px */
  --spacing-2: 1rem;            /* 16px */
  --spacing-2-5: 1.25rem;       /* 20px */
  --spacing-3: 1.5rem;          /* 24px */
  --spacing-4: 2rem;            /* 32px */
  --spacing-5: 3rem;            /* 48px */
  --spacing-6: 4rem;            /* 64px */
  --spacing-7: 5rem;            /* 80px */
  --spacing-8: 6rem;            /* 96px */
  --spacing-10: 8rem;           /* 128px */
  --spacing-12: 10rem;          /* 160px */

  /* ==========================================================================
     4. LAYOUT SYSTEM
     ========================================================================== */

  /* Container Max Widths */
  --container-max-width: 1200px;
  --container-readable: 800px;
  --container-policies: 680px;
  --container-narrow: 540px;

  /* Container Padding */
  --container-padding: var(--spacing-2);
  --container-padding-lg: var(--spacing-4);

  /* Section Padding */
  --section-padding-y: var(--spacing-6);          /* 64px - desktop */
  --section-padding-y-mobile: var(--spacing-5);   /* 48px - mobile */
  --section-padding-y-large: var(--spacing-8);    /* 96px - large sections */

  /* Breakpoints (for reference - use in media queries) */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;

  /* ==========================================================================
     5. COMPONENT TOKENS
     ========================================================================== */

  /* Border Radius */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-default: 8px;        /* Small */
  --radius-md: 12px;            /* Medium */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 50px;          /* Pill */
  --radius-full: 9999px;        /* Circle */

  /* Box Shadows */
  --shadow-none: none;
  --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-small: var(--shadow-sm);                 /* Alias: used by step numbers, hover states */
  --shadow-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-elevated: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Focus Ring */
  --shadow-focus: 0 0 0 3px rgba(123, 63, 157, 0.3);
  --shadow-focus-pink: 0 0 0 3px rgba(233, 30, 140, 0.3);
  --shadow-focus-blue: 0 0 0 3px rgba(0, 71, 187, 0.3);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-default: 0.2s ease;
  --transition-standard: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Transition Properties */
  --transition-colors: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  --transition-transform: transform 0.3s ease;
  --transition-opacity: opacity 0.3s ease;
  --transition-all: all 0.3s ease;

  /* Z-Index Scale */
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-fixed: 300;
  --z-index-modal-backdrop: 400;
  --z-index-modal: 500;
  --z-index-popover: 600;
  --z-index-tooltip: 700;

  /* ==========================================================================
     6. COMPONENT-SPECIFIC TOKENS
     ========================================================================== */

  /* Buttons */
  --button-padding-x: var(--spacing-3);
  --button-padding-y: var(--spacing-1-5);
  --button-padding-x-sm: var(--spacing-2);
  --button-padding-y-sm: var(--spacing-1);
  --button-padding-x-lg: var(--spacing-4);
  --button-padding-y-lg: var(--spacing-2);
  --button-radius: var(--radius-md);
  --button-font-weight: var(--font-weight-semibold);

  /* Cards */
  --card-padding: var(--spacing-3);
  --card-padding-lg: var(--spacing-4);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-medium);
  --card-shadow-hover: var(--shadow-elevated);

  /* Inputs */
  --input-padding-x: var(--spacing-2);
  --input-padding-y: var(--spacing-1-5);
  --input-radius: var(--radius-default);
  --input-border-width: 1px;
  --input-border-color: var(--color-border-default);
  --input-focus-border-color: var(--color-accent-purple);

  /* Navigation */
  --nav-height: 80px;
  --nav-height-mobile: 64px;

  /* Footer */
  --footer-padding-y: var(--spacing-6);
}

/* ==========================================================================
   RESPONSIVE OVERRIDES
   ========================================================================== */

/* Tablet and below */
@media (max-width: 1024px) {
  :root {
    --section-padding-y: var(--spacing-5);
    --nav-height: 72px;
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --section-padding-y: var(--spacing-4);
    --section-padding-y-large: var(--spacing-5);
    --nav-height: var(--nav-height-mobile);
    --container-padding: var(--spacing-2);

    /* Slightly smaller typography on mobile */
    --font-size-4xl: 2.5rem;
    --font-size-3xl: 2rem;
    --font-size-2xl: 1.5rem;
  }
}