/* CSS Custom Properties (Variables) */
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap");

:root {
  /* Typography */
  --font-family-primary: "Source Sans 3", sans-serif;
  --font-family-title: "Source Sans 3", sans-serif;
  --font-family-body: "Source Sans 3", sans-serif;

  /* Font Sizes */
  --font-size-headers-h1: 40px;
  --font-size-headers-h2: 32px;
  --font-size-headers-h3: 28px;
  --font-size-headers-h4: 24px;
  --font-size-headers-h5: 20px;
  --font-size-headers-h6: 16px;
  --font-size-other-button: 14px;
  --font-size-other-caption: 12px;
  --font-size-other-overline: 10px;
  --font-size-body-default: 16px;
  --font-size-body-link: 16px;
  --font-size-body-bold: 16px;
  --font-size-body-italic: 16px;
  --font-size-body-fine-print: 14px;
  --font-size-blockquote-body: 20px;
  --font-size-blockquote-header: 32px;

  /* Line Heights */
  --font-line-height-headers-h1: 48px;
  --font-line-height-headers-h2: 38px;
  --font-line-height-headers-h3: 34px;
  --font-line-height-headers-h4: 29px;
  --font-line-height-headers-h5: 24px;
  --font-line-height-headers-h6: 24px;
  --font-line-height-other-button: 16px;
  --font-line-height-other-caption: 14px;
  --font-line-height-other-overline: 12px;
  --font-line-height-body-default: 24px;
  --font-line-height-body-link: 24px;
  --font-line-height-body-bold: 24px;
  --font-line-height-body-italic: 24px;
  --font-line-height-blockquote-body: 30px;
  --font-line-height-body-fine-print: 21px;
  --font-line-height-blockquote-header: 38px;

  /* Letter Spacing */
  --font-letter-spacing-headers-h1: 1px;
  --font-letter-spacing-headers-h2: 1px;
  --font-letter-spacing-headers-h3: 1px;
  --font-letter-spacing-headers-h4: 1px;
  --font-letter-spacing-headers-h5: 1px;
  --font-letter-spacing-headers-h6: 1px;
  --font-letter-spacing-other-button: 1.25px;
  --font-letter-spacing-other-caption: 0.4000000059604645px;
  --font-letter-spacing-other-overline: 1.5px;
  --font-letter-spacing-body-default: 1px;
  --font-letter-spacing-body-link: 1px;
  --font-letter-spacing-body-fine-print: 1px;
  --font-letter-spacing-body-bold: 1px;
  --font-letter-spacing-body-italic: 1px;
  --font-letter-spacing-blockquote-body: 1px;
  --font-letter-spacing-blockquote-header: 1px;

  /* Font Weights Mapping */
  --font-weight-black: 900;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-regular: 400;

  /* Font Weights (Light Mode - Default) */
  --font-weights-headers-h1: var(--font-weight-bold);
  --font-weights-headers-h2: var(--font-weight-semibold);
  --font-weights-headers-h3: var(--font-weight-semibold);
  --font-weights-headers-h4: var(--font-weight-semibold);
  --font-weights-headers-h5: var(--font-weight-semibold);
  --font-weights-headers-h6: var(--font-weight-semibold);
  --font-weights-body-default: var(--font-weight-regular);
  --font-weights-body-link: var(--font-weight-regular);
  --font-weights-body-fine-print: var(--font-weight-regular);
  --font-weights-body-bold: var(--font-weight-bold);
  --font-weights-body-italic: var(--font-weight-regular);
  --font-weights-blockquote-body: var(--font-weight-regular);
  --font-weights-blockquote-header: var(--font-weight-semibold);
  --font-weights-other-button: var(--font-weight-semibold);
  --font-weights-other-caption: var(--font-weight-regular);
  --font-weights-other-overline: var(--font-weight-regular);

  /* Colors - Text (Light Mode - Default) */
  --text-primary: rgba(5, 56, 107, 0.87);
  --text-medium: rgba(5, 56, 107, 0.6);
  --text-on-light: rgba(5, 56, 107, 0.87);
  --text-on-dark: rgba(204, 229, 255, 0.95);
  --text-on-dark-medium: rgba(204, 229, 255, 0.6);

  /* Colors - Surfaces */
  --surface-base: #000e1c;
  --surface-field-passive: #001c38;
  --surface-field-active: #000e1c;
  --surface-field-stroke: #2a5580;
  --surface-field-highlight: #5b91c7;

  /* Colors - Brand */
  --brand-green: #00dd8d;
  --brand-green-hover: #01a76a;

  /* Colors - Error/Danger */
  --error-border: #be3a3a;
  --error-background: rgba(242, 124, 124, 0.4);
  --error-background-overlay: rgba(252, 254, 255, 0.9);

  /* Colors - Secondary Button */
  --secondary-button-border: #2a5580;
  --secondary-button-background: #001c38;

  /* Border Radius */
  --border-radius-xs: 4px;
  --border-radius-s: 8px;
  --border-radius-m: 24px;

  /* Spacing */
  --spacing-xs: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 32px;
  --spacing-xl: 40px;
  --spacing-xxl: 48px;

  /* Component Sizes */
  --input-height: 32px;
  --button-height: 40px;
  --logo-width-desktop: 515px;
  --card-max-width: 515px;
  --card-width-mobile: 100%;

  /* Layout */
  --container-gap: 3rem;
  --form-gap: 24px;
  --field-gap: 8px;

  /* Breakpoints */
  --breakpoint-mobile: 768px;

  /* Transitions */
  --transition-fast: 0.1s ease;
  --transition-normal: 0.2s ease;
  --transition-slow: 1s ease-in-out;

  /* Z-Index */
  --z-index-overlay: 1000;
  --z-index-modal: 1001;
  --z-index-tooltip: 1002;

  /* Shadows */
  --shadow-focus: 0 0 0 4px var(--surface-field-highlight);

  /* Background Gradients */
  --gradient-radial-blue: radial-gradient(
    87.76% 87.76% at 50% 12.24%,
    #05386b 0%,
    #002849 50%,
    #021c2b 100%
  );

  --gradient-error: linear-gradient(
    0deg,
    var(--error-background) 0%,
    var(--error-background) 100%
  );
}

/* Typography for Dark Mode */
body.dark-mode {
  /* Font Weights */
  --font-weights-headers-h1: var(--font-weight-black);
  --font-weights-headers-h2: var(--font-weight-bold);
  --font-weights-headers-h3: var(--font-weight-bold);
  --font-weights-headers-h4: var(--font-weight-bold);
  --font-weights-headers-h5: var(--font-weight-bold);
  --font-weights-headers-h6: var(--font-weight-bold);
  --font-weights-body-default: var(--font-weight-semibold);
  --font-weights-body-link: var(--font-weight-semibold);
  --font-weights-body-fine-print: var(--font-weight-semibold);
  --font-weights-body-bold: var(--font-weight-black);
  --font-weights-body-italic: var(--font-weight-semibold);
  --font-weights-blockquote-body: var(--font-weight-semibold);
  --font-weights-blockquote-header: var(--font-weight-bold);
  --font-weights-other-button: var(--font-weight-bold);
  --font-weights-other-caption: var(--font-weight-semibold);
  --font-weights-other-overline: var(--font-weight-semibold);

  /* Colors - Text */
  --text-primary: rgba(204, 229, 255, 0.95);
  --text-medium: rgba(204, 229, 255, 0.6);
}

/* Media Query Variables (for use in container queries) */
@supports (container-type: inline-size) {
  .container {
    --container-mobile: 480px;
    --container-tablet: 768px;
    --container-desktop: 1024px;
  }
}