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

: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: 32px;
  --font-size-headers-h2: 28px;
  --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: 38px;
  --font-line-height-headers-h2: 34px;
  --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.4px;
  --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);

  /* ===== COLOR PALETTE - BLUE SCALE (17 stops) ===== */
  --blue-050: #00060d;
  --blue-100: #000e1c;
  --blue-200: #001c38;
  --blue-300: #002b57;
  --blue-400: #05386b;
  --blue-500: #2a5580;
  --blue-550: #5b91c7;
  --blue-600: #93c0ed;
  --blue-650: #c5e1fc;
  --blue-700: #d9ecff;
  --blue-750: #e5f2ff;
  --blue-800: #edf6ff;
  --blue-850: #f2f9ff;
  --blue-900: #f7fbff;
  --blue-950: #fcfeff;
  --blue-999: #ffffff;

  /* ===== COLOR PALETTE - GREEN SCALE (17 stops) ===== */
  --green-050: #000d04;
  --green-100: #001c08;
  --green-200: #003810;
  --green-300: #005719;
  --green-400: #056b22;
  --green-500: #2a8042;
  --green-550: #00dd8d;
  --green-600: #8fdba4;
  --green-650: #bff2ce;
  --green-700: #d4fadf;
  --green-750: #defae6;
  --green-800: #edfff2;
  --green-850: #f2fff6;
  --green-900: #f7fffa;
  --green-950: #fafffb;
  --green-999: #ffffff;

  /* ===== SIGNAL COLORS - SEMANTIC ===== */
  /* Dangerous Red */
  --red-dark: #6a3235;
  --red-medium: #be3a3a;
  --red-main: #ff5b5b;
  --red-light: #ff7e7e;
  --red-faint: #ffebeb;
  --red-transparent: #ff5b5b66;

  /* Cautious Orange */
  --orange-dark: #603e1b;
  --orange-medium: #be7c3a;
  --orange-main: #f29333;
  --orange-light: #f2a85c;
  --orange-faint: #fff5eb;
  --orange-transparent: #f2933366;

  /* Attentive Yellow */
  --yellow-dark: #4e4d17;
  --yellow-medium: #beb53a;
  --yellow-main: #fff236;
  --yellow-light: #ffff80;
  --yellow-faint: #fffeeb;
  --yellow-transparent: #fff23666;

  /* Tranquil Blue (Info) */
  --info-blue-dark: #255063;
  --info-blue-medium: #1e6b8a;
  --info-blue-main: #0c83b2;
  --info-blue-light: #79d9ff;
  --info-blue-faint: #ebf9ff;
  --info-blue-transparent: #79d9ff66;

  /* Celebratory Green (Success) */
  --success-green-dark: #005719;
  --success-green-medium: #2a8042;
  --success-green-main: #00dd8d;
  --success-green-light: #00fa75;
  --success-green-faint: #edfff2;
  --success-green-transparent: #00fa7566; /* 40% in light mode */

  /* Indecisive Grey (Disabled) */
  --grey-dark: #5e5e5e;
  --grey-medium: #7a7a7a;
  --grey-main: #949494;
  --grey-light: #b8b8b8;
  --grey-faint: #f2f2f2;
  --grey-transparent: #c7c7c766;

  /* Neutral White */
  --white: #ffffff;
  --white-neutral: #c8cacc;

  /* ===== SURFACE & COMPONENT COLORS ===== */
  /* Base Fills */
  --surface-light: #fcfeff;
  --surface-dark: #002b57;
  --website-background: #002b57;

  /* Card Surfaces */
  --card-fill: #f7fbff;
  --card-stroke: #e5f2ff;
  --card-highlight: #edf6ff;
  --card-radius: 0.5rem;

  /* Button Styles */
  --button-primary-fill: #05386b;
  --button-primary-shadow: #001c38;
  --button-secondary-fill: #f2f9ff;
  --button-secondary-shadow: #d9ecff;
  --button-tertiary-fill: #93c0ed;
  --button-tertiary-shadow: #93c0ed;
  --button-fab-highlight: #00dd8d;
  --button-fab-shadow: #2a8042;
  --button-destructive: #be3a3a;
  --button-destructive-shadow: #6a3235;

  /* Field/Input Components */
  --field-passive-fill: #fcfeff;
  --field-passive-stroke: #e5f2ff;
  --field-active-stroke: #93c0ed;
  --field-active-fill: #ffffff;
  --field-radius: 4px;
  --field-fill: #ffffff;

  /* Tab Components */
  --tab-backdrop-fill: #edf6ff;
  --tab-active-fill: #fcfeff;
  --tab-active-stroke: #05386b;
  /* Temporary compat: requested surface token */
  --surfaces-base-base-fill: var(--tab-backdrop-fill);
  --tab-inactive-fill: #f7fbff;
  --tab-inactive-stroke: transparent;
  --tab-hover-fill: #e5f2ff;
  --tab-hover-stroke: #05386b;
  --tab-dropdown-fill: #fcfeff;
  --tab-dropdown-stroke: #e5f2ff;

  /* ===== TEXT COLORS & EMPHASIS ===== */
  /* Light Theme - Standard Text */
  --text-high-emphasis: #05386bde;
  --text-medium-emphasis: #05386b99;
  --text-low-emphasis: #05386b61;


  --text-standard-disabled: #05386B26 ;

  /* Light Theme - Inverted (on dark bg) */
  --text-inverted-high: #cce5fff2;
  --text-inverted-medium: #cce5ffad;
  --text-inverted-low: #cce5ff75;
  --text-inverted-input-passive: #8fb5dbad;

  /* Text on Colors */
  --text-on-dark-color-1: #fffffff2;
  --text-on-dark-color-2: #cce5fff2;
  --text-on-light-color-1: #000000f2;
  --text-on-light-color-2: #05386bde;
  --text-on-colour: #ffffff;

  /* ===== ICON COLORS & EMPHASIS ===== */
  /* Standard Icons */
  --icon-high-emphasis: #05386bde;
  --icon-medium-emphasis: #05386b99;
  --icon-low-emphasis: #05386b61;

  /* Inverted Icons */
  --icon-inverted-high: #cce5fff2;
  --icon-inverted-medium: #cce5ffad;
  --icon-inverted-low: #cce5ff75;
  --icon-inverted-input-passive: #8fb5dbad;

  /* Icons on Dark Images */
  --icon-on-dark-high: #fffffff2;
  --icon-on-dark-medium: #ffffffad;
  --icon-on-dark-low: #ffffff75;

  /* Icons on Light Images */
  --icon-on-light-high: #000000f2;
  --icon-on-light-medium: #000000ad;
  --icon-on-light-low: #00000075;

  /* ===== OVERLAYS & EFFECTS ===== */
  --hover-overlay: #ffffff1a;
  --disabled-overlay: #fcfeffb2;
  --highlight-underlay: #d9ecff;
  --destructive-underlay: #ff5b5b66;

  /* ===== LEGACY ALIASES (FOR BACKWARDS COMPATIBILITY) ===== */
  /* Colors - Text (Light Mode - Default) */
  --text-primary: var(--text-high-emphasis);
  --text-medium: var(--text-medium-emphasis);
  --text-on-light: var(--text-on-light-color-2);
  --text-on-dark: var(--text-on-dark-color-2);
  --text-on-dark-medium: var(--text-inverted-medium);

  /* Colors - Surfaces */
  --surface-base: #002b57;
  --surface-field-passive: #fcfeff;
  --surface-field-active: #ffffff;
  --surface-field-stroke: #e5f2ff;
  --surface-field-highlight: #93c0ed;

  /* Colors - Brand (Simplified) */
  --brand-green: #00dd8d;
  --brand-green-hover: #2a8042;
  --brand-blue: #05386b;
  --brand-blue-hover: #042a52;

  /* Brand Blue Opacity Variants */
  --brand-blue-08: rgba(5, 56, 107, 0.08);
  --brand-blue-10: rgba(5, 56, 107, 0.1);
  --brand-blue-12: rgba(5, 56, 107, 0.12);
  --brand-blue-14: rgba(5, 56, 107, 0.14);
  --brand-blue-15: rgba(5, 56, 107, 0.15);
  --brand-blue-16: rgba(5, 56, 107, 0.16);
  --brand-blue-18: rgba(5, 56, 107, 0.18);
  --brand-blue-20: rgba(5, 56, 107, 0.2);
  --brand-blue-24: rgba(5, 56, 107, 0.24);
  --brand-blue-26: rgba(5, 56, 107, 0.26);
  --brand-blue-30: rgba(5, 56, 107, 0.3);
  --brand-blue-32: rgba(5, 56, 107, 0.32);
  --brand-blue-35: rgba(5, 56, 107, 0.35);
  --brand-blue-40: rgba(5, 56, 107, 0.4);

  /* Light Blue Opacity Variants (for text on dark backgrounds) */
  --light-blue-24: rgba(204, 229, 255, 0.24);
  --light-blue-40: rgba(204, 229, 255, 0.4);

  /* Purple to Brand Blue Migration (for voice button focus states) */
  --brand-blue-purple-60: rgba(5, 56, 107, 0.6);
  --brand-blue-purple-45: rgba(5, 56, 107, 0.45);

  /* Signal Colors (Legacy) */
  --signal-red: #ff5b5b;
  --signal-orange: #f29333;
  --signal-yellow: #fff236;
  --signal-blue: #0c83b2;

  /* 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-xxxs: 0px;
  --spacing-xs: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --spacing-l: 32px;
  --spacing-xl: 40px;
  --spacing-xxl: 48px;
  --spacing-xxxl: 56px;

  --gutter-x: 1.5rem;
  --gutter-y: 0;

  /* 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 - Single Source of Truth */
  /* Mobile: 0-1023px (includes tablets) | Desktop: 1024px+ (menu switches here) */
  --breakpoint-mobile-max: 1023px;
  --breakpoint-desktop-min: 1024px;
  --breakpoint-desktop-md: 1200px;
  --breakpoint-desktop-lg: 1400px;
  
  /* Container widths aligned to breakpoints (maintains consistent page width) */
  --container-width-mobile: 100%;
  --container-width-desktop: 1100px;
  --container-width-desktop-md: 1300px;
  --container-width-desktop-lg: 1600px;

  /* 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);
  --shadow-modal: 0 8px 25px rgba(0, 0, 0, 0.15);

  /* Backdrop */
  --backdrop-overlay: rgba(0, 0, 0, 0.5);

  /* Semantic color aliases (light mode) */
  /* Dangerous Red */
  --danger-red-dark: var(--red-dark);
  --danger-red-medium: var(--red-medium);
  --danger-red-light: var(--red-light);
  --danger-red-faint: var(--red-faint);
  --danger-red-transparent: var(--red-transparent);

  /* Cautious Orange */
  --caution-orange-dark: var(--orange-dark);
  --caution-orange-medium: var(--orange-medium);
  --caution-orange-light: var(--orange-main);
  --caution-orange-faint: var(--orange-faint);
  --caution-orange-transparent: var(--orange-transparent);

  /* Attentive Yellow */
  --attention-yellow-dark: var(--yellow-dark);
  --attention-yellow-medium: var(--yellow-medium);
  --attention-yellow-light: var(--yellow-main);
  --attention-yellow-faint: var(--yellow-faint);
  --attention-yellow-transparent: var(--yellow-transparent);

  /* Indecisive Grey */
  --neutral-grey-dark: var(--grey-dark);
  --neutral-grey-medium: var(--grey-medium);
  --neutral-grey-light: var(--grey-main);
  --neutral-grey-faint: var(--grey-faint);
  --neutral-grey-transparent: var(--grey-transparent);

  /* Neutral White */
  --neutral-white-dark: #AFB0B2;
  --neutral-white-medium: #C8CACC;
  --neutral-white-light: #E1E3E5;
  --neutral-white-transparent-60: rgba(250, 252, 255, 0.6);
  --neutral-white-transparent-40: rgba(250, 252, 255, 0.4);

  /* 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%);
}

:root.dark-mode {
  /* Semantic color remaps (dark mode) */
  --danger-red-dark: var(--red-faint);
  --danger-red-medium: var(--red-light);
  --danger-red-light: var(--red-medium);
  --danger-red-faint: var(--red-dark);
  --danger-red-transparent: var(--red-transparent);

  --caution-orange-dark: var(--orange-faint);
  --caution-orange-medium: var(--orange-main);
  --caution-orange-light: var(--orange-medium);
  --caution-orange-faint: var(--orange-dark);
  --caution-orange-transparent: var(--orange-transparent);

  --attention-yellow-dark: #FFEEBB;
  --attention-yellow-medium: var(--yellow-main);
  --attention-yellow-light: var(--yellow-medium);
  --attention-yellow-faint: var(--yellow-dark);
  --attention-yellow-transparent: rgba(255, 248, 143, 0.4);

  --info-blue-dark: #EBF9FF;
  --info-blue-medium: #0C83B2;
  --info-blue-main: #1E6B8A;
  --info-blue-faint: #255063;
  --info-blue-transparent: rgba(177, 233, 255, 0.4);

  --success-green-dark: var(--green-800);
  --success-green-medium: var(--green-550);
  --success-green-light: var(--green-500);
  --success-green-faint: var(--green-300);
  --success-green-transparent: rgba(77, 255, 190, 0.4);

  --neutral-grey-dark: var(--grey-faint);
  --neutral-grey-medium: var(--grey-main);
  --neutral-grey-light: var(--grey-medium);
  --neutral-grey-faint: var(--grey-dark);
  --neutral-grey-transparent: var(--grey-transparent);

  --neutral-white-dark: #E1E3E5;
  --neutral-white-medium: #C8CACC;
  --neutral-white-light: #AFB0B2;
  --neutral-white-transparent-40: rgba(250, 252, 255, 0.4);
}

:root.dark-mode {
  --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);

  /* Text emphasis colors - switch to light colors for dark mode */
  --text-high-emphasis: var(--text-inverted-high);
  --text-medium-emphasis: var(--text-inverted-medium);
  --text-low-emphasis: var(--text-inverted-low);

  --text-primary: var(--text-inverted-high);
  --text-medium: var(--text-inverted-medium);
  --text-on-light: var(--text-inverted-high);
  --text-on-dark: var(--text-inverted-high);

  --surface-base: #0a1929;
  --surface-field-passive: #1e2936;
  --surface-field-active: #0f1419;
  --surface-field-stroke: #334155;
  --surface-field-highlight: #475569;

  --secondary-button-background: #1e2936;
  --error-background: rgba(239, 68, 68, 0.4);
  --error-background-overlay: rgba(15, 20, 25, 0.9);

  /* Dark mode field colors */
  --field-passive-fill: #1e2936;
  --field-passive-stroke: #334155;
  --field-active-stroke: #475569;
  --field-active-fill: #0f1419;
  --field-fill: #0f1419;

  /* Dark mode surface colors */
  --surface-light: #2d3748;

  /* Dark mode card colors */
  --card-fill: #1e293b;
  --card-stroke: #334155;

  /* Dark mode overlays */
  --hover-overlay: rgba(255, 255, 255, 0.08);
  --disabled-overlay: rgba(15, 20, 25, 0.7);
  --highlight-underlay: #2a5580;
  --destructive-underlay: #be3a3a;

  /* Temporary compat: requested surface token */
  --surfaces-base-base-fill: var(--surface-field-passive);

  /* Semantic color remaps (dark mode) */
  /* Dangerous Red */
  --danger-red-dark: var(--red-faint);
  --danger-red-medium: var(--red-light);
  --danger-red-light: var(--red-medium);
  --danger-red-faint: var(--red-dark);
  --danger-red-transparent: var(--red-transparent);

  /* Cautious Orange */
  --caution-orange-dark: var(--orange-faint);
  --caution-orange-medium: var(--orange-main);
  --caution-orange-light: var(--orange-medium);
  --caution-orange-faint: var(--orange-dark);
  --caution-orange-transparent: var(--orange-transparent);

  /* Attentive Yellow */
  --attention-yellow-dark: #FFEEBB;
  --attention-yellow-medium: var(--yellow-main);
  --attention-yellow-light: var(--yellow-medium);
  --attention-yellow-faint: var(--yellow-dark);
  --attention-yellow-transparent: rgba(255, 248, 143, 0.4);

  /* Tranquil Blue */
  --info-blue-dark: #EBF9FF;
  --info-blue-medium: #0C83B2;
  --info-blue-main: #1E6B8A;
  --info-blue-faint: #255063;
  --info-blue-transparent: rgba(177, 233, 255, 0.4);

  /* Celebratory Green */
  --success-green-dark: var(--green-800);
  --success-green-medium: var(--green-550);
  --success-green-light: var(--green-500);
  --success-green-faint: var(--green-300);
  --success-green-transparent: rgba(77, 255, 190, 0.4);

  /* Indecisive Grey */
  --neutral-grey-dark: var(--grey-faint);
  --neutral-grey-medium: var(--grey-main);
  --neutral-grey-light: var(--grey-medium);
  --neutral-grey-faint: var(--grey-dark);
  --neutral-grey-transparent: var(--grey-transparent);

  /* Neutral White */
  --neutral-white-dark: #E1E3E5;
  --neutral-white-medium: #C8CACC;
  --neutral-white-light: #AFB0B2;
  --neutral-white-transparent-40: rgba(250, 252, 255, 0.4);
}

@supports (container-type: inline-size) {
  .container {
    --container-mobile: 480px;
    --container-desktop: 1024px;
  }
}