@import url('/ui/reos-tokens.css');
:root{font-family:var(--reos-font);color:var(--reos-text);background:var(--reos-background);font-size:16px}
header{background:var(--reos-navy)}
.brand .brand-logo{width:120px;height:40px;display:block}
.brand .brand-caption{font-size:12px;color:#c4d2db}
.muted,small{color:var(--reos-muted)}
button{background:var(--reos-teal);border-radius:var(--reos-radius-control);min-height:44px}
button:hover:not(:disabled){background:var(--reos-teal-hover)}
button.secondary{background:var(--reos-surface);color:var(--reos-text);border:1px solid var(--reos-muted)}
button.secondary:hover:not(:disabled){background:var(--reos-background)}
button.danger{background:var(--reos-error)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--reos-focus);outline-offset:3px}
header button:focus-visible,header a:focus-visible{outline-color:#70d3c2}
.card,dialog{border-radius:var(--reos-radius-panel)}
a{color:var(--reos-teal)}
.tabs button.active{background:var(--reos-navy);color:white}
.badge{background:var(--reos-info-bg);color:var(--reos-info)}
.badge.good{background:var(--reos-success-bg);color:var(--reos-success)}
.badge.warn{background:var(--reos-warning-bg);color:var(--reos-warning)}
#notice.error,#edit-error{color:var(--reos-error)}