:root {
    --bg: #f5f7fa;
    --text: #222;
    --link: #005a99;
    --border: #e0e0e0;
  }
  
  body.dark-mode {
    --bg: #1e1e1e;
    --text: #e5e5e5;
    --link: #66b2ff;
    --border: #444;
  }
  


/* 🌐 Global Reset & Typography */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    background-color:  var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.2s ease;
}

a:hover {
  color: var(--link);
}



/* 🔧 Utility Container (reusable across components) */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}


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