/* ==========================================================================
   Base Styles & Tailwind Custom Configuration
   ========================================================================== */

/* Since we are using the Tailwind CDN, the configuration happens in a script tag in the HTML head. 
   However, we can define global vanilla CSS variables and base element styles here. */

:root {
  /* Brand Colors - Fallback if Tailwind variables are not used directly */
  --color-primary: #1e3a8a; /* Slate Blue */
  --color-secondary: #d97706; /* Amber */
  --color-accent: #3b82f6; /* Bright Blue */
  --color-background: #ffffff;
  --color-foreground: #0f172a;
  
  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;

  /* Border Radius */
  --radius: 0.5rem;
}

/* Base element styles to ensure consistency before Tailwind fully takes over or for elements not explicitly styled */
html {
  scroll-behavior: smooth;
  font-family: var(--font-sans);
  color: var(--color-foreground);
  background-color: var(--color-background);
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden; /* Prevent horizontal scroll from animations */
}

main {
  flex: 1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
}

/* Improved focus outline for accessibility */
*:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Custom Selection */
::selection {
  background-color: var(--color-secondary);
  color: #fff;
}