/* custom.css — theme variables, dark mode, density modes, font selectors, modal+audio styling. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500&display=swap');

:root {
  --brand-primary: #0F0F0F;
  --brand-accent:  #185FA5;
  --bg:            #FFFFFF;
  --surface:       #FAFAFA;
  --surface-2:     #F4F4F4;
  --text-primary:  #0F0F0F;
  --text-secondary:#444444;
  --text-tertiary: #888888;
  --border:        #ECECEC;
  --danger:        #E24B4A;
  --success:       #1D9E75;
  --warning:       #BA7517;
}

body.dark {
  --bg:            #0A0A0A;
  --surface:       #111111;
  --surface-2:     #1A1A1A;
  --text-primary:  #F0F0F0;
  --text-secondary:#999999;
  --text-tertiary: #666666;
  --border:        #222222;
}

body.compact #content { padding: 12px 24px 24px 24px; }
body.compact .row { padding: 8px 0; }
body.compact .h1 + * { margin-top: 16px; }

body.sidebar-right .layout { flex-direction: row-reverse; }
body.sidebar-right .rail { border-right: 0; border-left: 0.5px solid var(--border); }

.font-inter         { font-family: 'Inter', system-ui, sans-serif; }
.font-dm-sans       { font-family: 'DM Sans', system-ui, sans-serif; }
.font-geist         { font-family: 'Geist', system-ui, sans-serif; }
.font-space-grotesk { font-family: 'Space Grotesk', system-ui, sans-serif; }
.font-system        { font-family: system-ui, -apple-system, sans-serif; }

input[type=range] {
  -webkit-appearance: none; appearance: none;
  background: transparent;
}
input[type=range]::-webkit-slider-runnable-track { background: var(--border); height: 2px; border-radius: 1px; }
input[type=range]::-moz-range-track              { background: var(--border); height: 2px; border-radius: 1px; }
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-primary); margin-top: -2px;
}
input[type=range]::-moz-range-thumb {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand-primary); border: 0;
}

.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.4);
  display: flex; align-items: center; justify-content: center;
}
.modal-card {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  max-width: 90vw;
}

#webphone { color: var(--text-primary); }
#webphone .dot { box-sizing: content-box; }

* { transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease; }