/* ============================================================
RoofBros — base.css
Reset, typography primitives, focus states, icon system.
Load order: tokens → base → components → device → docs/page.
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--ground);
color: var(--body);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 {
margin: 0;
color: var(--ink);
font-family: var(--font-display);
font-variation-settings: 'wght' 600;
line-height: 1.15;
letter-spacing: -0.01em;
text-wrap: balance;
}
p { margin: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { color: var(--ink); font-variation-settings: 'wght' 600; }
code {
font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
font-size: 0.85em;
background: var(--panel);
border: 1px solid var(--line-soft);
padding: 0.1em 0.4em;
color: var(--ink);
}
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---------- icon system — stroke icons as masks, inherit currentColor.
Rule 'no emoji in UI chrome' is enforced through these. ---------- */
.ic {
display: inline-block; width: 20px; height: 20px; flex: none;
background: currentColor;
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-position: center; mask-position: center;
}
.ic-search { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-close { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-pin { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-camera { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-compare { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-home { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-file { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-eye { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-back { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-chevron { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-palette { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-trash { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-arrow-right { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-plus { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-mail { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-check { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-user { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-truck { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-apple { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-roller { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-tiles { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-warn { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-download { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-circle { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.ic-undo { -webkit-mask-image: url('data:image/svg+xml;utf8,'); mask-image: url('data:image/svg+xml;utf8,'); }
.field .control .ic, .suggest .s-row .ic { width: 18px; height: 18px; color: var(--muted); }
.tabbar .t .ic { width: 26px; height: 26px; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}