/* --- Tandem Design System Variables --- */

:root {
  /* Debug Colors */
  --debug-type-1: rgba(255, 0, 128, 0.25);
  --debug-type-2: rgba(0, 200, 255, 0.25);
  --debug-type-3: rgba(50, 255, 50, 0.2);

  /* Colors */
  --bg-dark: #07050d;
  --bg-dark-rgb: 7, 5, 13;
  --white-rgb: 255, 255, 255;
  --black-rgb: 0, 0, 0;
  --bg-dropdown-option: #120e1a;
  --bg-card-glass: linear-gradient(90deg, rgba(34, 25, 42, 0.70) 0%, rgba(35, 31, 55, 0.70) 100%);
  --border-glass: rgba(255, 255, 255, 0.08);
  --border-hover: #923AFF;

  --primary-purple: #923AFF;
  --primary-purple-rgb: 146, 58, 255;
  --primary-purple-hover: #7b2cbf;
  --primary-purple-dark: var(--primary-purple-hover);
  --primary-purple-light: #bf75ff;
  --secondary-purple-light: var(--primary-purple-light);
  --secondary-blue-purple: #5f3ee4;
  --active-gradient-start: #8824dd;
  --secondary-grey-purple: #8e8a9f;
  --text-white: #ffffff;
  --text-muted: #8e8a9f;
  --shadow-purple-glow: 0 0 24px rgba(146, 58, 255, 0.4);
  --bg-footer: var(--bg-dark);
  --bg-pure-black: #000101;
  --color-success: #00E676;
  --color-error: var(--color-accent-coral);
  --color-accent-coral: #ff7676;

  /* Gradients */
  --gradient-title: linear-gradient(90deg, #FFCC75 0%, #FF7676 100%);
  --gradient-title-shimmer: linear-gradient(90deg, #FFCC75 0%, #FF7676 50%, #FFCC75 100%);
  --gradient-purple-glow: linear-gradient(135deg, rgba(146, 58, 255, 0.35) 0%, rgba(106, 27, 154, 0.25) 50%, rgba(0, 184, 212, 0.15) 100%);

  /* Glassmorphism Effect */
  --glass-blur: blur(6px);

  /* Typography */
  --font-headings: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-text: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lh-title: 1.15;
  --lh-body: 1.6;
  --letter-spacing-title: 0.02em;
  --letter-spacing-outline: 0.04em;
  --letter-spacing-subtitle: 0.08em;
  --outline-stroke-width: 1.5px;
  --outline-stroke-color: #FF9E75;

  /* Fluid Font Sizes (Responsive clamp) */
  --fs-h1: clamp(1.75rem, 4vw, 3.5rem);
  /* 28px -> 56px */
  --fs-h2: clamp(1.75rem, 4vw, 3.5rem);
  /* 28px -> 56px */
  --fs-subtitle: clamp(1.1rem, 2vw, 1.75rem);
  /* 17.6px -> 28px */
  --fs-h3: clamp(1rem, 1.5vw, 1.3125rem);
  /* 16px -> 21px */
  --fs-h4: clamp(1.125rem, 1.4vw, 1.25rem);
  /* 18px -> 20px */
  --fs-body: clamp(1rem, 1.25vw, 1.125rem);
  /* 16px -> 18px */
  --fs-p-small: clamp(0.6875rem, 0.8vw, 0.75rem);
  /* 11px -> 12px */
  --fs-small: 0.875rem;
  /* 14px */

  /* Outline Stroke Widths */
  --outline-stroke-width-desktop: 3.6px;
  --outline-stroke-width-tablet: 2.4px;
  --outline-stroke-width-mobile: 1.8px;

  /* Component UI Sizes */
  --btn-icon-size: 18px;
  --card-icon-size: 64px;

  /* Decorative Glow Sizes */
  --glow-size: 700px;
  --glow-blur: 90px;

  /* Spacings (Base 4px system) */
  --space-xs: 0.25rem;
  /* 4px */
  --space-sm: 0.5rem;
  /* 8px */
  --space-md: 0.75rem;
  /* 12px */
  --space-lg: 1rem;
  /* 16px */
  --space-xl: 1.5rem;
  /* 24px */
  --space-2xl: 2rem;
  /* 32px */
  --space-3xl: 3rem;
  /* 48px */
  --space-4xl: 4rem;
  /* 64px */
  --space-5xl: 6rem;
  /* 96px */

  /* Border Radiuses (Strictly sharp edges) */
  --radius-sharp: 0px;

  /* Layout */
  --container-max-width: 1400px;
  --card-max-width: 587px;

  /* Unified Spacings */
  --section-padding: calc(var(--space-5xl) * 2) 0;
  --layout-gap: var(--space-3xl);
}

@media (max-width: 1600px) {
  :root {
    /* Scale down typography clamp values for laptop screens (1024px - 1600px) */
    --fs-h1: clamp(1.75rem, 3.2vw, 3rem);
    /* 28px -> 48px */
    --fs-h2: clamp(1.75rem, 3.2vw, 2.75rem);
    /* 28px -> 44px */
    --fs-subtitle: clamp(1rem, 1.6vw, 1.35rem);
    /* 16px -> 21.6px */
    --fs-h3: clamp(0.95rem, 1.2vw, 1.15rem);
    /* 15.2px -> 18.4px */
    --fs-h4: clamp(1rem, 1.1vw, 1.125rem);
    /* 16px -> 18px */
    --fs-body: clamp(0.95rem, 1.05vw, 1.05rem);
    /* 15.2px -> 16.8px */

    /* Scale down spacing to create more "air" vertically and horizontally on smaller viewports */
    --space-5xl: 4.5rem;
    /* 72px instead of 96px */
    --space-4xl: 3rem;
    /* 48px instead of 64px */
    --space-3xl: 2.25rem;
    /* 36px instead of 48px */
    --space-2xl: 1.5rem;
    /* 24px instead of 32px */
    --space-xl: 1.125rem;
    /* 18px instead of 24px */

    /* Restrict container width on laptops to add margins and prevent edge sticking */
    --container-max-width: 85%;
  }
}

@media (max-width: 1280px) {
  :root {
    --container-max-width: 90%;
    --section-padding: calc(var(--space-3xl) * 2) 0;
    --layout-gap: var(--space-xl);
    --fs-h3: 1.125rem;
    /* 18px */
    --fs-body: 0.9375rem;
    /* 15px */
  }
}

@media (max-width: 1024px) {
  :root {
    --container-max-width: 100%;
  }
}