/* root.css
   Palette:
   - beige light:   #F5F5DC
   - creamy white:  #FFFFFF
   - gold accent:   #D4AF37
   - dark gray txt: #3C3C3C
*/

/* ==========================
   Variables (Colors & sizes)
   ========================== */
:root{
  --bg-beige: #F5F5DC;
  --bg-cream: #FFFFFF;
  --accent-gold: #D4AF37;
  --text-dark: #3C3C3C;

  --max-width: 1100px;
  --radius: 12px;
  --card-radius: 10px;
  --gap: 1rem;

  --font-sans: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================
   Reset / Base
   ========================== */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html,body{
  height:100%;
  margin:0;
  font-family:var(--font-sans);
  color:var(--text-dark);
  background:  var(--bg-cream) ;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}
main {
    flex: 1; /* takes remaining space */
}