:root, :host {
  /* Dark-only theme */
  --bg: #0f1115;
  --header: #0f1115;
  --footer: #0f1115;
  --card: #161922;
  --text: #e6e8ee;
  --muted: #9aa3b2; /* gray-400-ish */
  --muted-strong: #cdd3dd; /* gray-300-ish */
  --border: #262b36; /* slate-800 */
  --bg-hover: #1c2130; /* subtle hover */
  --accent: #3ea6ff; /* professional blue */

  /* Grayscale palette */
  --g050: #0f1115;
  --g100: #131720;
  --g150: #161922;
  --g200: #1c2130;
  --g300: #2a3140;
  --g500: #9aa3b2;
  --g600: #cdd3dd;
  --g700: #e6e8ee;
}

/* Typography & base */
html, body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Links */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:.6rem 1rem; border-radius:12px; font-size:.95rem; font-weight:600; line-height:1; transition: transform .06s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: #0b0e14; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 8px 24px rgba(62,166,255,.15); }
.btn-accent:hover { filter: brightness(.98); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 10px 28px rgba(62,166,255,.22); }
.btn-outline { border: 1px solid var(--border); background: transparent; color: var(--text); }
.btn-outline:hover { background: var(--bg-hover); border-color: #334155; }
button:disabled { opacity:.5; cursor:not-allowed; }

/* Cards */
.card { border:1px solid var(--border); border-radius:16px; background: radial-gradient(120% 120% at 0% 0%, rgba(62,166,255,.06) 0%, rgba(62,166,255,0) 40%), var(--card); box-shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 8px 40px rgba(0,0,0,.25); }

/* Forms */
input, textarea, select { border:1px solid var(--border); border-radius:12px; padding:.6rem .8rem; width:100%; background: #0f141b; color: var(--text); outline: none; }
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus, select:focus { border-color:#3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.25); }
label { color: var(--muted-strong); font-size:.9rem; }

/* Header & nav */
header { background: color-mix(in oklab, var(--header) 85%, transparent); }
header a { color: var(--text); }

/* Footer */
footer { color: var(--muted); }

/* Utility */
small, .muted { color: var(--muted); }

/* Service icons */
.gradient-icon svg { width: 1rem; height: 1rem; color: #fff; }

/* Calculator input indentation */
/* Scope to calculators container to avoid impacting other site forms */
#calculators-container input,
#calculators-container select,
#calculators-container textarea,
.calculator-card input,
.calculator-card select,
.calculator-card textarea {
  padding-left: 1.25rem;
  padding-top: 0.8rem;
  padding-bottom: 0.8rem;
  border-radius: 12px;
}