@define props {
  bgLight: #fff;
  bgDark: #242424;
  fgLight: #15181c;
  fgDark: #e2e2e2;
  fontFamily: Inter, Avenir, 'Calibri', Arial, sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, 'Apple Color Emoji', 'Segoe UI Emoji';
  fontSize: 1rem;
  fontWeight: 400;
  lineHeight: 1.5;
  colorSchemeLight: [data-mode=light];
  colorSchemeDark: [data-mode=dark];
  highlightColor: #2f2f2f;
  linkColor: #007bff;
  linkDecor: none;
  linkHoverColor: #0056b3;
  linkHoverDecor: underline;
  headingColor: inherit;
  headingMarginBottom: 0.5rem;
  paragraphMarginBottom: 1rem;
}

@alga base {
  :root {
    ref-fontFamily: Inter, Avenir, 'Calibri', Arial, sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, 'Apple Color Emoji', 'Segoe UI Emoji';
    ref: fontSize-16px lineHeight-24px fontWeight-400 textRendering-optimizeLegibility;
    ref-colorScheme: light dark;
    ref: fontSynthesis-none;
    webkit-fontSmoothing: antialiased;
    moz-ostFontSmoothing: grayscale;
    webkit-textSizeAdjust: 100%;
  }
  
  *, ::after, ::before {
    ref: boxSizing-borderBox;
  }
  
  html {
	  ref: lineHeight-1.15 tabSize-4 backgroundColor-{props.bgLight} color-{props.fgLight};
    prefers-dark: backgroundColor-{props.bgDark} color-{props.fgDark};
    prefers-toDark: backgroundColor-{props.bgDark} color-{props.fgDark};
    prefers-toLight: backgroundColor-{props.bgLight} color-{props.fgLight};
  }
  
  html{props.colorSchemeLight} {
    ref-colorScheme: only light;
  }
  
  html{props.colorSchemeDark} {
    ref-colorScheme: only dark;
  }
  
  body {
    ref-fontFamily: {props.fontFamily};
    ref: backgroundColor-{props.bgLight} margin-0px padding-0px fontSize-{props.fontSize} fontWeight-{props.fontWeight} lineHeight-{props.lineHeight} color-{props.fgLight} minHeight-100vh;
    prefers-dark: backgroundColor-{props.bgDark} color-{props.fgDark};
    prefers-toDark: backgroundColor-{props.bgDark} color-{props.fgDark};
    prefers-toLight: backgroundColor-{props.bgLight} color-{props.fgLight};
  }
  
  .a, a {
    ref: textDecoration-{props.linkDecor} color-{props.linkColor};
    
    &:hover {
      ref: textDecoration-{props.linkHoverDecor} color-{props.linkHoverColor};
    }
    
    &:visited {
      ref: color-{props.linkHoverColor};
    }
  }
  
  hr {
	  ref: height-0 color-inherit;
  }
  
  abbr[title] {
	  ref-textDecoration: underline dotted;
  }
  
  b,
  strong {
	  ref: fontWeight-bolder;
  }
  
  code,
  kbd,
  samp,
  pre {
	  ref-fontFamily: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
	  ref: fontSize-1em;
  }
  
  small {
	  ref: fontSize-80pct;
  }
  
  sub,
  sup {
	  ref: fontSize-75pct lineHeight-0 position-relative verticalAlign-baseline;
  }

  sub {
	  ref: bottom-n0.25em;
  }

  sup {
	  ref: top-n0.5em;
  }
  
  table {
	  ref: textIndent-0 borderColor-inherit borderCollapse-collapse;
  }
  
  button,
  input,
  optgroup,
  select,
  textarea {
	  ref: fontFamily-inherit fontSize-100pct lineHeight-1.15 margin-0;
  }
  
  button,
  select {
	  ref: textTransform-none;
  }
  
  button,
  [type='button'],
  [type='reset'],
  [type='submit'] {
	  ref: appearance-none border-none backgroundColor-transparent;
  }
  
  ::-moz-focus-inner {
	  ref: borderStyle-none padding-0;
  }
  
  :-moz-focusring {
	  ref-outline: 1px dotted ButtonText;
  }
  
  :-moz-ui-invalid {
	  ref: boxShadow-none;
  }
  
  legend {
	  ref: padding-0;
  }
  
  progress {
	  ref: verticalAlign-baseline;
  }
  
  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
	  ref: height-auto;
  }
  
  [type='search'] {
	  ref: outlineOffset-n2px;
  }
  
  ::-webkit-file-upload-button {
	  ref: font-inherit;
  }
  
  summary {
	  ref: display-listItem;
  }
  
  .h1, .h2, .h3, .h4, .h5, .h6, 
  h1, h2, h3, h4, h5, h6 {
    ref: marginTop-0px marginBottom-{props.headingMarginBottom} fontWeight-500 lineHeight-1.2;
    ref: color-{props.headingColor};
    
    a,
    a:hover {
      color: {props.headingColor};
    }
  }
  
  .p, p {
    ref: marginTop-0px marginBottom-{props.paragraphMarginBottom};
  }
  
  code,
  kbd,
  samp,
  pre,
  .mark, mark {
    ref: backgroundColor-{props.highlightColor} borderRadius-0.25rem color-hexfff;
    ref-padding: .1875em .5rem;
  }
  
  img, svg {
    ref: verticalAlign-middle;
  }
}