/* THEME VARIABLES
   We scope variables to body.theme-light / body.theme-dark so JS can toggle classes.
*/

/* Light theme (default) */
body.theme-light {
  --bg: #ffffff;
  --bg-soft: #f5f7fb;
  --text: #0f1115;
  --muted: #4b5565;
  --card: #ffffff;
  --border: #d7dce6;
  --accent: #b03f49; /* keep your accent */
}

/* Dark theme (lighter gray background) */
body.theme-dark {
  --bg: ##2a2a2a;        /* lighter than near-black */
  --bg-soft: #343944;   /* softer panels */
  --text: #e7e9ee;
  --muted: #a5acb8;
  --card: #2c313a;
  --border: #464c5b;
  --accent: #b03f49;    /* unchanged */
}

/* Base element styles (unchanged, keep using variables) */
* { box-sizing: border-box }
html, body { margin: 0; padding: 0; font-family: Inter, system-ui, Segoe UI, Roboto, Helvetica, Arial }
body { background: var(--bg); color: var(--text); line-height: 1.6; transition: background .2s ease, color .2s ease }

/* The rest of your existing rules can remain as-is: */
.container { width: min(1100px,92%); margin-inline: auto }
.site-header { position: sticky; top: 0; border-bottom: 1px solid var(--border) }
.header-inner { display: flex; justify-content: space-between; align-items: center; padding: .85rem 0 }
.nav a { color: var(--muted); text-decoration: none; margin: 0 .5rem; padding: .4rem .6rem; border-radius: 10px; border: 1px solid transparent }
.nav a.active, .nav a:hover { color: var(--text); border-color: var(--border) }
.hero { padding: 3rem 0 }
.btn { display: inline-block; padding: .7rem 1rem; border-radius: 12px; border: 1px solid var(--border); color: var(--text) }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff }
.section { padding: 2rem 0 }
.contact-form { display: grid; gap: 1rem; max-width: 560px }
.field { display: grid; gap: .3rem }
input, textarea { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; color: var(--text) }
.alert { border: 1px solid var(--border); border-radius: 12px; padding: .75rem 1rem; margin: .75rem 0 }
.alert.success { border-color: #2b8a3e33; background: #2b8a3e11 }
.alert.error { border-color: #c92a2a33; background: #c92a2a11 }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden }
.brand-logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--accent); color: #fff; font-weight: 800 }