/* Minimal element defaults so a bare page inherits the brand. */
body {
  background: var(--surface);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: var(--size-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0; }
h1 { font-weight: var(--weight-black); font-size: var(--size-h1); line-height: var(--lh-h1); letter-spacing: var(--track-h1); }
h2 { font-weight: var(--weight-extrabold); font-size: var(--size-h2); line-height: var(--lh-h2); letter-spacing: var(--track-h2); }
h3 { font-weight: var(--weight-semibold); font-size: var(--size-h3); line-height: var(--lh-h3); }
h4 { font-weight: var(--weight-semibold); font-size: var(--size-h4); line-height: var(--lh-h4); }
h5 { font-weight: var(--weight-medium); font-size: var(--size-h5); line-height: var(--lh-h5); }
h6 { font-weight: var(--weight-medium); font-size: var(--size-h6); line-height: var(--lh-h6); }
a { color: var(--accent); font-weight: var(--weight-semibold); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--text-primary); }
[data-surface="light"] a:hover { color: var(--cogent-blue); text-decoration-thickness: 2px; }
::selection { background: rgba(37, 162, 240, .35); }
.cg-pattern {
  background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Crect width='8' height='8' rx='2.5' fill='%2380A8D9'/%3E%3C/svg%3E");
  background-size: 18px 18px;
  opacity: .5;
  -webkit-mask-image: radial-gradient(130% 130% at 0% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
  mask-image: radial-gradient(130% 130% at 0% 100%, #000 0%, rgba(0,0,0,.35) 45%, transparent 74%);
}