import { globalStyle } from '@vanilla-extract/css';

import { vars } from './vars.css';

globalStyle('*, *::before, *::after', {
  margin: 0,
  padding: 0,
  boxSizing: 'inherit',
});

globalStyle('html', {
  textSizeAdjust: '100%',
  WebkitFontSmoothing: 'antialiased',
});

globalStyle('html, body', {
  height: '100%',
});

globalStyle('body', {
  boxSizing: 'border-box',

  color: vars.colors['base-text-strong'],
  backgroundColor: vars.colors.base,

  fontFamily: vars.fonts.primary,
  fontSize: vars.fontSizes.body1,
  fontWeight: vars.fontWeights.body1,
  lineHeight: vars.lineHeights.base,
});

globalStyle('b, strong', {
  fontWeight: vars.fontWeights.bold,
});

globalStyle('button, input, select, textarea', {
  font: 'inherit',
  color: 'inherit',
});

globalStyle('img, video', {
  display: 'block',
  maxWidth: '100%',
});

globalStyle('code, pre, kbd, samp', {
  fontFamily: vars.fonts.mono,
  fontSize: '1em',
});