:root {
    --bg: #8e95a1;
    --fg: #ffffff;
    --accent: #ffcfed;
    --radius: 0.75rem;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    --transition: 0.3s ease;
    --max: 1000px; 
    --pad: 16px; 
    --headerH: 64px;
    /* glass */
    --glass-bg: rgba(255, 140, 213, 0.12);
    --glass-border: rgba(255, 169, 245, 0.25);
    --glass-blur: 10px;
    --glass-shadow: 0 4px 20px rgba(255, 132, 255, 0.2);
    /* button */
    --btn-bg-hover: rgba(255, 180, 217, 0.5);
    /* home */
    --hero-content-max: 35%;
    --placeholder-color: #c4c3c3;
}

[data-theme="dark"] {
    --bg: #111111;
    --fg: #ffffff;
    --glass-bg: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.18);
}

* {
  box-sizing: border-box;
}

/* smooth scroll + sticky header, but kept out of base.html */
html { 
    scroll-behavior: smooth; 
}


body {
  font-family: 'Quicksand', sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
}

h1, h2 {
  font-family: 'Libre Baskerville', Serif; /* for headings if you want cute emphasis */
  font-weight: 500;
  letter-spacing: 0.03em;
}
/* section anchors won’t hide under sticky header */
section { 
    scroll-margin-top: calc(var(--headerH) + 12px); 
    padding: 64px 0; 
}