/* ==========================================================================
   Design System: Globals & Foundational Styles
   - Font: Roboto
   - Mode: Light Only
   - Grid: 12-column (Defined via layout classes, spacing tokens apply)
   - Unit: rem-based, derived from 4px (0.25rem) increments assuming 16px base
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------- */
  /* ! COLOR PALETTE (RAW VALUES) */
  /* -------------------------------------------------------------------------- */
  /* Unchanged - Colors are unitless */
  --color-raw-white: #FBFBFB;
  --color-raw-gray-dark: #333341;
  --color-raw-red-brand: #D92D27;
  --color-raw-gray-medium: #CBCAD2;
  --color-raw-blue-dark: #0B1F3F;
  --color-raw-black: #000000;
  --color-raw-true-white: #FFFFFF;

  /* -------------------------------------------------------------------------- */
  /* ! SEMANTIC COLOR TOKENS (LIGHT MODE) */
  /* -------------------------------------------------------------------------- */
  /* Unchanged - Colors are unitless */

  /* ! Background Colors */
  --color-background-body: var(--color-raw-white);
  --color-background-surface: var(--color-raw-true-white);
  --color-background-surface-alt: var(--color-raw-white);
  --color-background-interactive-disabled: #EEEEEE;

  /* ! Text Colors */
  --color-text-primary: var(--color-raw-blue-dark);
  --color-text-secondary: var(--color-raw-gray-dark);
  --color-text-subtle: var(--color-raw-gray-medium);
  --color-text-disabled: var(--color-raw-gray-medium);
  --color-text-link: var(--color-raw-blue-dark);
  --color-text-link-hover: var(--color-raw-gray-dark);
  --color-text-brand: var(--color-raw-red-brand);
  --color-text-on-brand: var(--color-raw-white); /* WCAG AA for large/bold text on #D92D27 */
  --color-text-on-dark: var(--color-raw-white);
  --color-text-error: var(--color-raw-red-brand);
  /* Add other semantic text colors as needed */

  /* ! Border Colors */
  --color-border-default: var(--color-raw-gray-medium);
  --color-border-subtle: #EAEAEA;
  --color-border-interactive: var(--color-raw-gray-dark);
  --color-border-interactive-focus: var(--color-raw-red-brand);
  --color-border-error: var(--color-raw-red-brand);

  /* ! Brand & Interaction Colors */
  --color-brand-primary: var(--color-raw-red-brand);
  --color-brand-primary-hover: #C02822;
  --color-brand-primary-active: #A8231E;

  /* ! Focus Indicator */
  --color-focus-ring: var(--color-raw-red-brand);

  /* ! Semantic Feedback Colors (Placeholders) */
  --color-feedback-error-background: #FEECEC;
  --color-feedback-error-text: var(--color-raw-red-brand);
  --color-feedback-error-border: var(--color-raw-red-brand);
  --color-feedback-warning-background: #FFF9E6;
  --color-feedback-warning-text: #B38B00;
  --color-feedback-warning-border: #FFCC00;
  --color-feedback-success-background: #EAF7EC;
  --color-feedback-success-text: #006644;
  --color-feedback-success-border: #00875A;
  --color-feedback-info-background: #E0F2FF;
  --color-feedback-info-text: var(--color-raw-blue-dark);
  --color-feedback-info-border: var(--color-raw-blue-dark);


  /* -------------------------------------------------------------------------- */
  /* ! TYPOGRAPHY (rem units based on 16px root) */
  /* -------------------------------------------------------------------------- */
  --font-family-base: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-family-heading: var(--font-family-base);

  /* ! Font Sizes (Values correspond to px divisible by 4) */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 1rem;      /* 16px */
  --font-size-md: 1.25rem;   /* 20px */
  --font-size-lg: 1.5rem;    /* 24px */
  --font-size-xl: 1.75rem;   /* 28px */
  --font-size-xxl: 2rem;     /* 32px */
  --font-size-xxxl: 2.25rem; /* 36px */
  --font-size-display: 3rem;   /* 48px */

  /* ! Line Heights (Values correspond to px divisible by 4) */
  /* These rem values achieve the target px line-heights defined previously */
  --line-height-xs: 1rem;      /* 16px (Use unitless 1.33 for relative scaling?) */
  --line-height-sm: 1.5rem;    /* 24px (Use unitless 1.5 for relative scaling?) */
  --line-height-md: 1.75rem;   /* 28px (Use unitless 1.4 for relative scaling?) */
  --line-height-lg: 2rem;      /* 32px (Use unitless 1.33 for relative scaling?) */
  --line-height-xl: 2.5rem;    /* 40px (Use unitless 1.43 for relative scaling?) */
  --line-height-xxl: 2.75rem;  /* 44px (Use unitless 1.38 for relative scaling?) */
  --line-height-xxxl: 3rem;    /* 48px (Use unitless 1.33 for relative scaling?) */
  --line-height-display: 3.75rem;/* 60px (Use unitless 1.25 for relative scaling?) */

  /* Alternative: Unitless line-heights (Recommended for flexibility) */
  --line-height-unitless-tight: 1.25;
  --line-height-unitless-normal: 1.5; /* Good default for body text */
  --line-height-unitless-loose: 1.75;

  /* ! Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ! Letter Spacing (Optional) */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.05em;

  /* -------------------------------------------------------------------------- */
  /* ! SPACING (Based on 0.25rem = 4px base unit) */
  /* -------------------------------------------------------------------------- */
  --space-base: 0.25rem; /* 4px */
  --space-1: var(--space-base);           /* 4px */
  --space-2: calc(var(--space-base) * 2); /* 8px */
  --space-3: calc(var(--space-base) * 3); /* 12px */
  --space-4: calc(var(--space-base) * 4); /* 16px */
  --space-5: calc(var(--space-base) * 5); /* 20px */
  --space-6: calc(var(--space-base) * 6); /* 24px */
  --space-7: calc(var(--space-base) * 7); /* 28px */
  --space-8: calc(var(--space-base) * 8); /* 32px */
  --space-10: calc(var(--space-base) * 10);/* 40px */
  --space-12: calc(var(--space-base) * 12);/* 48px */
  --space-16: calc(var(--space-base) * 16);/* 64px */
  --space-20: calc(var(--space-base) * 20);/* 80px */
  --space-24: calc(var(--space-base) * 24);/* 96px */
  /* Add more steps as needed */

  /* -------------------------------------------------------------------------- */
  /* ! BORDERS & RADIUS */
  /* -------------------------------------------------------------------------- */
  /* Borders typically remain in px for fine control */
  --border-width-thin: 1px;
  --border-width-medium: 2px;
  --border-width-thick: 3px;
  --border-style-default: solid;
  --border-style-dashed: dashed;
  --border-default: var(--border-width-thin) var(--border-style-default) var(--color-border-default);

  /* ! Border Radius (rem units based on 4px increments) */
  --radius-sm: 0.25rem;   /* 4px */
  --radius-md: 0.5rem;    /* 8px */
  --radius-lg: 0.75rem;   /* 12px */
  --radius-xl: 1rem;      /* 16px */
  --radius-2xl: 1.5rem;   /* 24px */
  --radius-3xl: 2rem;     /* 32px */
  --radius-full: 9999px;  /* Keep px for full rounding */
  
  /* ! Glass effect borders */
  --border-glass: 1px solid rgba(255, 255, 255, 0.18);
  --border-glass-darker: 1px solid rgba(255, 255, 255, 0.12);

  /* -------------------------------------------------------------------------- */
  /* ! SHADOWS / ELEVATION */
  /* -------------------------------------------------------------------------- */
  /* Offsets converted to rem, blur/spread often kept in px but can be rem */
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-sm: 0 0.25rem 0.5rem -0.125rem var(--shadow-color);   /* 0 4px 8px -2px */
  --shadow-md: 0 0.5rem 1rem -0.25rem var(--shadow-color);      /* 0 8px 16px -4px */
  --shadow-lg: 0 0.75rem 1.5rem -0.25rem rgba(0, 0, 0, 0.15); /* 0 12px 24px -4px */
  --shadow-xl: 0 1rem 2rem -0.5rem rgba(0, 0, 0, 0.2);       /* 0 16px 32px -8px */
  --shadow-2xl: 0 1.5rem 3rem -0.75rem rgba(0, 0, 0, 0.25);  /* 0 24px 48px -12px */
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-outline: 0 0 0 3px rgba(217, 45, 39, 0.15);
  
  /* Modern glass morphism shadows */
  --shadow-glass-sm: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
  --shadow-glass-md: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
  --shadow-glass-lg: 0 8px 32px 0 rgba(31, 38, 135, 0.3);

  /* -------------------------------------------------------------------------- */
  /* ! TRANSITIONS & ANIMATION */
  /* -------------------------------------------------------------------------- */
  /* Enhanced with modern easing functions */
  --transition-duration-short: 150ms;
  --transition-duration-medium: 300ms;
  --transition-duration-long: 500ms;
  --transition-duration-xl: 800ms;
  
  --transition-timing-function-default: ease-in-out;
  --transition-timing-function-bounce: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --transition-timing-function-smooth: cubic-bezier(0.65, 0, 0.35, 1);
  --transition-timing-function-spring: cubic-bezier(0.25, 0.1, 0.25, 1.5);
  
  --transition-default: all var(--transition-duration-medium) var(--transition-timing-function-default);
  --transition-smooth: all var(--transition-duration-medium) var(--transition-timing-function-smooth);
  --transition-bounce: all var(--transition-duration-medium) var(--transition-timing-function-bounce);
  --transition-spring: all var(--transition-duration-medium) var(--transition-timing-function-spring);
  
  /* Animation durations */
  --animation-duration-slow: 1500ms;
  --animation-duration-medium: 800ms;
  --animation-duration-fast: 400ms;
  --animation-duration-micro: 150ms;

  /* -------------------------------------------------------------------------- */
  /* ! LAYOUT & GRID (rem units based on 4px increments) */
  /* -------------------------------------------------------------------------- */
  --grid-column-count: 12;
  --grid-gutter-width-desktop: 1.5rem;  /* 24px */
  --grid-gutter-width-mobile: 1rem;     /* 16px */
  --container-max-width: 75rem;         /* 1200px */
  --container-padding-horizontal-desktop: 1.5rem; /* 24px */
  --container-padding-horizontal-mobile: 1rem;  /* 16px */

  /* -------------------------------------------------------------------------- */
  /* ! Z-INDEX */
  /* -------------------------------------------------------------------------- */
  /* Unchanged - Unitless integers */
  --z-index-deep: -1;
  --z-index-base: 1;
  --z-index-surface: 10;
  --z-index-navigation: 100;
  --z-index-overlay: 1000;
  --z-index-toast: 9000;
  
  /* ! BACKDROP FILTERS */
  /* -------------------------------------------------------------------------- */
  --backdrop-blur-sm: blur(4px);
  --backdrop-blur-md: blur(8px);
  --backdrop-blur-lg: blur(12px);
  --backdrop-blur-xl: blur(16px);

  /* ! MODERN EFFECTS */
  /* -------------------------------------------------------------------------- */
  --effect-glass-light: rgba(255, 255, 255, 0.25);
  --effect-glass-medium: rgba(255, 255, 255, 0.15);
  --effect-glass-dark: rgba(255, 255, 255, 0.05);
  --effect-overlay-light: rgba(0, 0, 0, 0.05);
  --effect-overlay-medium: rgba(0, 0, 0, 0.1);
  --effect-overlay-dark: rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Base HTML & Body Styles
   ========================================================================== */

/* Footer logo displays in its original colors with proper sizing */
.footer-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}


*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Set base font size for rem calculation. 100% == 16px typically */
  font-size: 100%;
  /* Use unitless line-height for better inheritance across font sizes */
  line-height: var(--line-height-unitless-normal); /* e.g., 1.5 */
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: var(--font-family-base);
  /* scroll-behavior: smooth; */
}

body {
  margin: 0;
  background-color: var(--color-background-body);
  color: var(--color-text-primary);
  /* Apply base body font size using rem */
  font-size: var(--font-size-sm); /* 1rem = 16px */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}

/* Basic default styles for common elements using rem tokens */
h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: var(--space-4); /* 1rem */
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  /* Use unitless line-height for headings, slightly tighter often works well */
  line-height: var(--line-height-unitless-tight); /* e.g., 1.25 */
  color: var(--color-text-primary);
}

/* Apply heading sizes using rem tokens */
h1 { font-size: var(--font-size-xxxl); } /* 2.25rem */
h2 { font-size: var(--font-size-xxl); }  /* 2rem */
h3 { font-size: var(--font-size-xl); }   /* 1.75rem */
h4 { font-size: var(--font-size-lg); }   /* 1.5rem */
h5 { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); } /* 1.25rem */
h6 { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); } /* 1rem */

p {
  margin-top: 0;
  margin-bottom: var(--space-4); /* 1rem */
  /* Ensure paragraphs inherit body's line-height correctly */
  line-height: inherit;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--transition-duration-short) ease-in-out;
}

a:hover,
a:focus {
  color: var(--color-text-link-hover);
  /* text-decoration: underline; */
}

/* Consistent focus ring - size remains px for sharpness */
*:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
  height: auto; /* Add height: auto for better intrinsic ratio handling */
}

ul, ol {
    padding-left: var(--space-6); /* 1.5rem */
    margin-top: 0;
    margin-bottom: var(--space-4); /* 1rem */
}

li {
    margin-bottom: var(--space-2); /* 0.5rem */
}

hr {
    display: block;
    height: var(--border-width-thin); /* Use px border width */
    border: 0;
    border-top: var(--border-width-thin) solid var(--color-border-default);
    margin: var(--space-8) 0; /* 2rem */
    padding: 0;
}