tabs/app/globals.css

/* What is true of the DOCUMENT, and nothing else.
 *
 * Everything a component draws with — the palette, the type scale, the surface
 * ladder, the tap-highlight reset, the smoothing — arrives with
 * `@hanzo/ui/styles.css`, imported ahead of this file in layout.tsx. Tabs declares
 * no palette. It used to declare three tokens and use forty-one, and every
 * undefined one became a stark white hairline against black; an app inventing
 * a palette is how an estate ends up with several, none of them right.
 *
 * What is left is what no React tree can say, because no React tree owns
 * <html>: the ground is as tall as the window, dynamically, so a phone's
 * shrinking chrome does not expose a strip underneath it. */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Geist Sans';
  src: url('/fonts/geist-sans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('/fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Geist Sans Mono';
  src: url('/fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'GeistMono';
  src: url('/fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
}

:root {
  --font-sans: 'Geist', 'Geist Sans', Zen, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: 'Geist Mono', 'Geist Sans Mono', 'GeistMono', 'Zen Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace;
  --f-family: var(--font-sans);
}

html,
body {
  height: 100%;
}
body {
  min-height: 100dvh;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code,
kbd,
samp,
pre,
[data-mono] {
  font-family: var(--font-mono);
}

.font_body,
.font_heading {
  font-family: var(--font-sans) !important;
}

.font_mono {
  font-family: var(--font-mono) !important;
}

/* Touch targets. A bare button in this app is a real control, and a control you
   cannot reliably hit is a control that does not work. */
@media (pointer: coarse) {
  button,
  a[role='button'] {
    min-height: 44px;
  }
}