/* Global Design Tokens: typography, colors, radii, buttons */

:root {
  /* Font Families */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  /* Text Colors */
  --color-text: #1F1F1F;
  --color-text-inverse: #FFFFFF;

  /* Brand */
  --color-brand-1: #6958ED;
  --color-brand-2: #EDCF4B;

  /* Buttons - shared across project (override per page/section if needed) */
  /* New unified button tokens */
  --btn-primary-bg: #1F1F1F;
  --btn-primary-color: #ffffff;
  --btn-primary-border: transparent;
  --btn-primary-hover-bg: #404040;
  --btn-primary-hover-color: #ffffff;
  --btn-primary-hover-border: transparent;
  --btn-primary-hover-shadow: 0 6px 20px rgba(31, 31, 31, 0.25);
  --btn-primary-hover-transform: translateY(-2px);
  --btn-primary-focus-bg: #1F1F1F;
  --btn-primary-focus-color: #ffffff;
  --btn-primary-focus-border: transparent;
  --btn-primary-active-bg: #1F1F1F;
  --btn-primary-active-color: #ffffff;
  --btn-primary-active-border: transparent;

  --btn-secondary-bg: transparent;
  --btn-secondary-color: #1F1F1F;
  --btn-secondary-border: #1F1F1F;
  --btn-secondary-hover-bg: #ffffff;
  --btn-secondary-hover-color: #1F1F1F;
  --btn-secondary-hover-border: #ffffff;
  --btn-secondary-hover-shadow: 0 6px 20px rgba(31, 31, 31, 0.25);
  --btn-secondary-hover-transform: translateY(-1px);
  --btn-secondary-focus-bg: transparent;
  --btn-secondary-focus-color: #1F1F1F;
  --btn-secondary-focus-border: 1F1F1F;
  --btn-secondary-active-bg: transparent;
  --btn-secondary-active-color: #1F1F1F;
  --btn-secondary-active-border: #1F1F1F;

  /* Dark background button variants */
  --btn-primary-bg-dark: #ffffff;
  --btn-primary-color-dark: #1F1F1F;
  --btn-primary-border-dark: #ffffff;
  --btn-primary-hover-bg-dark: #f0f0f0;
  --btn-primary-hover-color-dark: #1F1F1F;
  --btn-primary-hover-border-dark: #f0f0f0;
  --btn-primary-hover-shadow-dark: 0 6px 20px rgba(255, 255, 255, 0.25);
  --btn-primary-hover-transform-dark: translateY(-2px);
  --btn-primary-focus-bg-dark: #ffffff;
  --btn-primary-focus-color-dark: #1F1F1F;
  --btn-primary-focus-border-dark: #ffffff;
  --btn-primary-active-bg-dark: #ffffff;
  --btn-primary-active-color-dark: #1F1F1F;
  --btn-primary-active-border-dark: #ffffff;

  --btn-secondary-bg-dark: transparent;
  --btn-secondary-color-dark: #ffffff;
  --btn-secondary-border-dark: #ffffff;
  --btn-secondary-hover-bg-dark: #ffffff2a;
  --btn-secondary-hover-color-dark: #ffffff;
  --btn-secondary-hover-border-dark: #ffffff;
  --btn-secondary-hover-shadow-dark: 0 6px 20px rgba(255, 255, 255, 0.2);
  --btn-secondary-hover-transform-dark: translateY(-1px);
  --btn-secondary-focus-bg-dark: transparent;
  --btn-secondary-focus-color-dark: #ffffff;
  --btn-secondary-focus-border-dark: #ffffff;
  --btn-secondary-active-bg-dark: transparent;
  --btn-secondary-active-color-dark: #ffffff;
  --btn-secondary-active-border-dark: #ffffff;

  --btn-outline-color: transparent;
  --btn-outline-hover-text: #FFFFFF;
  --btn-outline-bg: transparent;
  --btn-outline-hover-bg: auto; /* fallback handled in rule */
  --btn-hover-gradient-start: #1F1F1F;
  --btn-hover-gradient-end: #000000;
  --btn-hover-shadow: rgba(0, 0, 0, 0.18);
  --btn-hover-scale: 1.02;
  --btn-press-scale: 0.98;
  --btn-border-width: 1px;
  --btn-backdrop-filter: none;

  /* Solid button tokens */
  --btn-solid-bg: #1F1F1F;
  --btn-solid-text: #FFFFFF;
  --btn-solid-border: none;
  --btn-solid-hover-bg: #000000;
  --btn-solid-hover-text: #FFFFFF;

  /* Focus behavior - buttons stay in normal state */
  --btn-focus-outline: none;
  --btn-focus-outline-offset: 0;
  --btn-focus-box-shadow: none;
  --btn-focus-transform: none;
  --btn-focus-bg: inherit;
  --btn-focus-color: inherit;
  --btn-focus-border-color: inherit;

  /* Radii */
  --radius-pill: 50px;
  --radius-round: 999px;
  --radius-card: 16px;

  /* Layout */
  --container-max: 1400px;

  /* Badge Tokens - Unified across all pages */
  --badge-padding: clamp(6px, 1.5vw, 10px) clamp(16px, 3vw, 18px);
  --badge-font-size: clamp(12px, 2.5vw, 14px);
  --badge-font-weight: 500;
  --badge-border-radius: 999px;
  --badge-text-transform: uppercase;
  --badge-line-height: 1.2;
  
  /* Badge Variants */
  /* --badge-primary-bg: #fff; */
  --badge-primary-color: #000;
  --badge-primary-border: 1px solid #000;
  
  --badge-secondary-bg: transparent;
  --badge-secondary-color: #fff;
  --badge-secondary-border: 1px solid #fff;
  
  --badge-dark-bg: #1F1F1F;
  --badge-dark-color: #fff;
  --badge-dark-border: 1px solid #1F1F1F;
  
  /* Dark Badge Variants */
  --badge-dark-primary-bg: transparent;
  --badge-dark-primary-color: #fff;
  --badge-dark-primary-border: 1px solid #ffffff3b;
  
  --badge-dark-secondary-bg: transparent;
  --badge-dark-secondary-color: #fff;
  --badge-dark-secondary-border: 1px solid #414141;

  /* Hero Title Tokens - Unified across all internal pages */
  --hero-title-font-size: clamp(32px, 8vw, 64px);
  --hero-title-font-weight: 500;
  --hero-title-line-height: 1.2;
  --hero-title-color: #1F1F1F;
  --hero-title-margin: clamp(16px, 4vw, 24px) 0;
  --hero-title-padding: clamp(0px, 2vw, 14px) clamp(0px, 15vw, 200px);
  --hero-title-font-family: var(--font-sans);
  
  /* Hero Subtitle Tokens */
  --hero-subtitle-font-size: clamp(18px, 4vw, 22px);
  --hero-subtitle-line-height: clamp(27px, 5vw, 33px);
  --hero-subtitle-color: #1F1F1F;
  --hero-subtitle-margin: 0 0 clamp(40px, 8vw, 56px) 0;
  --hero-subtitle-font-weight: 300;
  --hero-subtitle-font-family: var(--font-sans);
  
  /* Section Title Tokens - Light Background */
  --section-title-light-font-size: clamp(32px, 4vw, 48px);
  --section-title-light-font-weight: 500;
  --section-title-light-line-height: 1.2;
  --section-title-light-color: #1F1F1F;
  --section-title-light-margin: 32px 0 24px 0;
  --section-title-light-font-family: var(--font-sans);
  
  /* Section Title Tokens - Dark Background */
  --section-title-dark-font-size: clamp(32px, 4vw, 48px);
  --section-title-dark-font-weight: 500;
  --section-title-dark-line-height: clamp(40px, 5vw, 60px);
  --section-title-dark-color: #fff;
  --section-title-dark-margin: 32px 0 24px 0;
  --section-title-dark-font-family: var(--font-sans);
  
  /* Section Description Tokens - Light Background */
  --section-description-light-font-size: clamp(16px, 3vw, 20px);
  --section-description-light-line-height: clamp(24px, 4vw, 30px);
  --section-description-light-color: #404040;
  --section-description-light-margin: 0 0 var(--hero-subtitle-margin) 0;
  --section-description-light-font-weight: 300;
  --section-description-light-font-family: var(--font-sans);
  
  /* Section Description Tokens - Dark Background */
  --section-description-dark-font-size: clamp(16px, 3vw, 20px);
  --section-description-dark-line-height: clamp(24px, 4vw, 30px);
  --section-description-dark-color: #ffffffbd;
  --section-description-dark-margin: 0 0 var(--hero-subtitle-margin) 0;
  --section-description-dark-font-weight: 300;
  --section-description-dark-font-family: var(--font-sans);
  
  /* Card Title Tokens */
  --card-title-font-size: clamp(20px, 3vw, 22px);
  --card-title-font-weight: 500;
  --card-title-line-height: clamp(24px, 3.5vw, 27px);
  --card-title-color: #1F1F1F;
  --card-title-font-family: var(--font-sans);
  
  /* Card Title Tokens - Dark Theme */
  --card-title-dark-font-size: clamp(20px, 3vw, 22px);
  --card-title-dark-font-weight: 500;
  --card-title-dark-line-height: clamp(24px, 3.5vw, 27px);
  --card-title-dark-color: #fff;
  --card-title-dark-font-family: var(--font-sans);
  
  /* Card Description Tokens */
  --card-description-font-size: clamp(14px, 2.5vw, 16px);
  --card-description-font-weight: 300;
  --card-description-line-height: clamp(24px, 3.5vw, 27px);
  --card-description-color: #404040;
  --card-description-margin: 0;
  --card-description-font-family: var(--font-sans);
  
  /* Card Description Tokens - Dark Theme */
  --card-description-dark-font-size: clamp(14px, 2.5vw, 16px);
  --card-description-dark-font-weight: 300;
  --card-description-dark-line-height: clamp(24px, 3.5vw, 27px);
  --card-description-dark-color: #ffffffbd;
  --card-description-dark-margin: 0;
  --card-description-dark-font-family: var(--font-sans);
  
  /* Stats Text Tokens */
  --stats-text-font-size: clamp(14px, 1.5vw, 16px);
  --stats-text-font-weight: 300;
  --stats-text-line-height: 1.4;
  --stats-text-color: #999999;
  --stats-text-margin: 0;
  --stats-text-font-family: var(--font-sans);
  --stats-text-display: flex;
  --stats-text-justify-content: center;
  
  /* Card Tokens */
  --card-bg: #fff;
  --card-border: 1px solid #E5E7EB;
  --card-border-radius: 16px;
  --card-padding: clamp(24px, 4vw, 32px);
  --card-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  --card-transition: all 0.3s ease;
  --card-hover-transform: translateY(-4px);
  --card-hover-box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
  --card-hover-border-color: #8272fe;
  --card-gap: 24px;
  --card-display: flex;
  --card-flex-direction: column;
  
  /* Icon Wrapper Tokens */
  --icon-wrapper-size: clamp(40px, 6vw, 50px);
  --icon-wrapper-bg: linear-gradient(135deg, #CBCBFB 0%, #5E5EF3 100%);
  --icon-wrapper-border-radius: 50%;
  --icon-wrapper-display: flex;
  --icon-wrapper-align-items: center;
  --icon-wrapper-justify-content: center;
  --icon-wrapper-flex-shrink: 0;
  --icon-wrapper-icon-size: clamp(20px, 3vw, 24px);
  --icon-wrapper-icon-color: #1f1f1f;
  
  /* Toggle Tabs Tokens (based on pricing-toggle) */
  --toggle-tabs-display: flex;
  --toggle-tabs-background: rgba(255, 255, 255, 0.1);
  --toggle-tabs-border-radius: 999px;
  --toggle-tabs-padding: clamp(4px, 0.5vw, 6px);
  --toggle-tabs-gap: 0;
  --toggle-tabs-position: relative;
  --toggle-tabs-margin: 0 auto clamp(40px, 6vw, 60px);
  --toggle-tabs-max-width: clamp(280px, 90vw, 800px);
  --toggle-tabs-backdrop-filter: blur(20px);
  --toggle-tabs-border: 1px solid rgba(255, 255, 255, 0.2);
  --toggle-tabs-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* Toggle Tab Tokens (based on pricing-toggle__btn) */
  --toggle-tab-flex: 1;
  --toggle-tab-padding: clamp(12px, 2.5vw, 16px) clamp(20px, 3vw, 24px);
  --toggle-tab-font-size: clamp(14px, 2.5vw, 16px);
  --toggle-tab-font-weight: 500;
  --toggle-tab-line-height: 1.2;
  --toggle-tab-font-family: var(--font-sans);
  --toggle-tab-border-radius: 999px;
  --toggle-tab-border: none;
  --toggle-tab-cursor: pointer;
  --toggle-tab-transition: all 0.3s ease;
  --toggle-tab-background: unset;
  --toggle-tab-color: #333;
  --toggle-tab-active-background: #222;
  --toggle-tab-active-color: #fff;
  --toggle-tab-active-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --toggle-tab-hover-background: #ffffff;
  --toggle-tab-hover-color: #222;
  
  /* Toggle Tabs Tokens - Dark Theme */
  --toggle-tabs-dark-display: flex;
  --toggle-tabs-dark-background: rgba(255, 255, 255, 0.1);
  --toggle-tabs-dark-border-radius: 999px;
  --toggle-tabs-dark-padding: clamp(4px, 0.5vw, 6px);
  --toggle-tabs-dark-gap: 0;
  --toggle-tabs-dark-position: relative;
  --toggle-tabs-dark-margin: 0 clamp(200px, 25vw, 400px) clamp(40px, 6vw, 44px);
  --toggle-tabs-dark-max-width: clamp(280px, 90vw, 800px);
  --toggle-tabs-dark-backdrop-filter: blur(20px);
  --toggle-tabs-dark-border: 1px solid rgba(255, 255, 255, 0.2);
  --toggle-tabs-dark-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  
  /* Toggle Tab Tokens - Dark Theme */
  --toggle-tab-dark-flex: 1;
  --toggle-tab-dark-padding: clamp(12px, 2.5vw, 16px) clamp(20px, 3vw, 24px);
  --toggle-tab-dark-font-size: clamp(14px, 2.5vw, 16px);
  --toggle-tab-dark-font-weight: 500;
  --toggle-tab-dark-line-height: 1.2;
  --toggle-tab-dark-font-family: var(--font-sans);
  --toggle-tab-dark-border-radius: 999px;
  --toggle-tab-dark-border: none;
  --toggle-tab-dark-cursor: pointer;
  --toggle-tab-dark-transition: all 0.3s ease;
  --toggle-tab-dark-background: unset;
  --toggle-tab-dark-color: rgba(255, 255, 255, 0.6);
  --toggle-tab-dark-active-background: #fff;
  --toggle-tab-dark-active-color: #1f1f1f;
  --toggle-tab-dark-active-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  --toggle-tab-dark-hover-background: rgba(255, 255, 255, 0.1);
  --toggle-tab-dark-hover-color: rgba(255, 255, 255, 0.8);
  
  /* Layout Tokens */
  --uc-sections-gap: clamp(60px, 15vw, 150px);
  
  /* UC Hero Container Tokens */
  --uc-hero-container-grid-columns: 0.9fr 1.1fr;
  --uc-hero-container-gap: var(--uc-sections-gap);
  --uc-hero-container-align-items: center;
  --uc-hero-container-position: relative;
  
  /* UC Hero Container Mobile Tokens */
  --uc-hero-container-mobile-grid-columns: 1fr;
  --uc-hero-container-mobile-gap: 40px;
  --uc-hero-container-mobile-text-align: center;
  
  /* UC Hero Actions Tokens */
  --uc-hero-actions-display: flex;
  --uc-hero-actions-gap: 16px;
  --uc-hero-actions-flex-wrap: wrap;
  --uc-hero-actions-margin-top: var(--hero-subtitle-margin);
  --uc-hero-actions-justify-content: flex-start;
  
  /* UC Hero Actions Mobile Tokens */
  --uc-hero-actions-mobile-flex-direction: column;
  --uc-hero-actions-mobile-align-items: center;
  --uc-hero-actions-mobile-justify-content: center;
  
  /* FAQ Tokens (reusable component) */
  --faq-padding: clamp(60px, 12vw, 150px) 0;
  --faq-container-max: var(--container-max);
  --faq-container-padding: 0 clamp(16px, 4vw, 40px);
  --faq-gap: 0;
  --faq-item-padding: clamp(24px, 5vw, 44px) 0;
  --faq-item-border-width: 1px;
  --faq-item-border-style: solid;
  --faq-item-border-color-light: #e5e5e5;
  --faq-item-border-color-dark: rgba(255, 255, 255, 0.12);
  --faq-question-font-size: clamp(16px, 2.5vw, 18px);
  --faq-question-font-weight: 400;
  --faq-question-line-height: 1.4;
  --faq-question-color-light: #1F1F1F; /* updated per request */
  --faq-question-color-dark: #ffffff;
  --faq-chevron-color-light: #1F1F1F; /* match light text tone */
  --faq-chevron-color-dark: rgba(255, 255, 255, 0.7);
  --faq-answer-color-light: #1F1F1F; /* light body text */
  --faq-answer-color-dark: rgba(255, 255, 255, 0.75);
  --faq-answer-font-size: 1rem;
  --faq-answer-line-height: 1.6;
  --faq-answer-transition: max-height 0.3s ease, padding 0.3s ease;
  --faq-answer-max-height: 500px;
}

/* Apply Roboto site-wide */
html, body {
  font-family: var(--font-sans);
}