:root{
  --font-interface:"Aptos","Segoe UI",Roboto,Arial,sans-serif;
  --font-display:"Avenir Next","Century Gothic","Trebuchet MS",sans-serif;
}
html,body,input,select,textarea,button,table{font-family:var(--font-interface)}
html{font-size:16px}
body{font-size:15.5px;line-height:1.55;font-variant-numeric:tabular-nums;letter-spacing:.006em}
h1,h2,h3,.brand-name,.login-card h1,.dashboard-hero h1,.page-head h1,.modal-card>h2{
  font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;line-height:1.12
}
.brand-name,.dashboard-eyebrow,.login-eyebrow,.page-head h1{
  letter-spacing:.035em
}
button,.badge,th,#nav button,.toolbar label{
  font-family:var(--font-display);font-weight:700;letter-spacing:.015em
}
input,select,textarea{letter-spacing:.01em}
input,select,textarea,button{font-size:.96rem}
.content{font-size:1rem}
.page-head h1,.dashboard-hero h1{font-size:clamp(1.55rem,2.4vw,2.15rem)}
.modal-card>h2{font-size:clamp(1.3rem,2vw,1.7rem)}
table{font-size:.93rem}
.muted,small{line-height:1.45}
td,strong,.ring-value,.customer-count-grid b{font-variant-numeric:tabular-nums}
@media(max-width:740px){html{font-size:15px}.content{font-size:1rem}button,input,select,textarea{min-height:42px}}
@media print{body,input,select,textarea,button,table{font-family:"Aptos","Segoe UI",Arial,sans-serif}h1,h2,h3{font-family:"Avenir Next","Century Gothic","Trebuchet MS",sans-serif}}